Avatar 头像
展示用户、团队或实体的头像，并在图片失败时提供回退标识。
使用概览
适合使用
- 列表、评论或账户入口需要快速识别实体身份时。
不建议使用
- 图片只是内容插图而不代表具体实体身份时。
真实示例
用户头像与回退
图片不可用时仍显示可辨识的姓名首字。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/avatar.json基础用法
导入
import { Avatar, AvatarImage, AvatarFallback } from "@richardqiu/quartz/avatar";JSX
<Avatar><AvatarImage src="/avatars/lin.png" alt="林晨" /><AvatarFallback>林</AvatarFallback></Avatar>状态与控制摘要
默认
加载中
错误
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
delayMs | number | 0 | 控制回退内容在图片加载前延迟显示的毫秒数。 |
组合结构
- 01
Avatar - 02
AvatarImage - 03
AvatarFallback
键盘约定
- Avatar 不可交互，也不进入键盘焦点顺序。
可访问性契约
- AvatarImage 必须显式提供 alt；装饰图使用空 alt。
- 加载失败时由 AvatarFallback 保留可见缩写和必要的可访问名称。