Avatar - 头像

Demo

更新日期

2026-09-25 UTC

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