Avatar
avatar头像 · Base UI 图片+fallback
用法
图片与 fallback
src 加载成功显示图片；失败或省略时回退 fallback（首字母 / 文字）。
ZS瑚
tsx
<>
<Avatar src="/demo/avatar-12.jpg" alt="demo" fallback="ZS" />
<Avatar fallback="瑚" />
</>尺寸
size 提供 sm / md / lg / xl / 2xl 五档直径。
SMLXL2X
tsx
<>
<Avatar size="sm" fallback="S" />
<Avatar size="md" fallback="M" />
<Avatar size="lg" fallback="L" />
<Avatar size="xl" fallback="XL" />
<Avatar size="2xl" fallback="2X" />
</>何时用
展示单个用户头像，图片加载失败/缺省时回退到 fallback（首字母等）。需要头像 + 名称/描述组合用 [User]；多人堆叠头像组用 AvatarCircles。
导入
ts
import { Avatar } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | 圆直径档位（CVA 变体）。 |
| src | string | — | 头像图片 URL；加载失败回退到 fallback。 |
| alt | string | — | 图片替代文本。 |
| className | string | — | — |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| fallback | ReactNode | 无图/加载失败时显示（通常为首字母）。 |
禁忌 / 坑
- 基于 Base UI Avatar，
src失败时才显示fallback；务必给fallback否则失败/无图时空白。 size是受限档位（sm/md/lg），自定义尺寸用className覆盖。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
ZS
<Avatar size="md" src="/demo/avatar-12.jpg" fallback="ZS" />