Avatar - 头像

更新日期

2026-10-04 UTC

Demo

avatar/demo.vue

<template>
  <div class="flex flex-wrap items-center gap-4">
    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" size="lg" />
    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" />
    <YlfAvatar src="https://avatars.githubusercontent.com/u/24221472" alt="YunYouJun" size="sm" />
    <YlfAvatar fallback="云" />
    <YlfAvatar fallback="YLF" size="lg" />
  </div>
</template>

头像：图片加载状态管理与回退基于 reka-ui，加载失败时优雅回退到首字。

Props

属性	说明	类型	默认值
src	图片地址	string	—
alt	替代文字	string	''
fallback	回退文字（如姓名首字）	string	—
size	尺寸	sm | md | lg	md

有意义的头像使用完整 alt（例如用户姓名）；图片缺失时，回退图像也使用该名称。没有 alt 时回退文字作为名称；仅装饰的图片可保留空 alt。fallback 决定显示的文字，不会从图片地址自动推断姓名。