Avatar 头像

图片与文字双降级：没有图片时用昵称首字，连文字都没有时用默认图标。

基础用法

林晚EphemeralSR

<SrAvatar text="林晚" />
<SrAvatar text="Ephemeral" />

三级降级

这是头像组件最需要处理好的部分，顺序是：

有 src  →  显示图片
图片加载失败或未提供  →  显示 text 的首字
text 也没有  →  显示默认图标

每一步都必须有兜底。 头像的 src 来自用户上传或第三方服务， 失效是常态而非异常——直接渲染一个碎图图标比什么都不显示更糟。

周

<!-- 图片地址失效时自动降级为文字 -->
<SrAvatar src="/broken.jpg" text="林" />

<!-- 都不传则显示默认图标 -->
<SrAvatar />

首字提取

text 取第一个字符。中文取首字，英文取首字母。

alt 同时用作图片的替代文本与 title——不传时回落到 text。

晚A

<SrAvatar text="晚" alt="林晚的头像" />

尺寸与形状

小中大方

<SrAvatar text="小" size="sm" />
<SrAvatar text="中" size="md" />
<SrAvatar text="大" size="lg" />
<SrAvatar text="方" shape="square" size="lg" />

自定义背景色

不传时使用主色。用于按用户分组着色（不同部门不同色）这类场景。

ABCD

<SrAvatar text="A" color="#2bb673" />

底色与文字对比度

组件不校验对比度——传入浅色时首字会看不清。 若颜色来自用户配置，建议在应用层做一次对比度检查， 或改用带描边的 shape="square" 变体。

自定义内容

默认插槽会覆盖全部降级逻辑，用于完全自绘（比如给头像叠一个在线状态点）。

自绘

<SrAvatar>
  <span class="custom">自绘</span>
</SrAvatar>

Props

名称	类型	默认值	说明
src	string	—	图片地址，加载失败时自动降级
text	string	—	降级显示的文本，取首字
alt	string	text	图片替代文本，同时作为 title
size	'sm' | 'md' | 'lg'	'md'	尺寸
shape	'circle' | 'square'	'circle'	形状
color	string	—	降级时的背景色，不传用主色

插槽

名称	说明
default	自定义内容，会覆盖全部降级逻辑

无障碍

• 图片的 alt 默认回落到 text，避免出现「读屏软件只念出『图片』」的情况
• 头像通常只是装饰（用户名已在旁边），此时传 alt="" 明确表示忽略—— 空 alt 是「这张图不重要」的正确表达方式，比省略 alt 更好