Avatar 头像
/AV-uh-tar/ · noun · 内容类模式 · #125
代表一个人的小圆形（有时是圆角方形）：有照片就显示头像照片，没有就显示姓名首字母或灰色的人形剪影。它出现在名字、评论和消息旁边，也常作为页头角落的账户按钮；边上的小圆点可以表示对方在线。好几个叠成一排的叫头像组（avatar group）。
别名：用户头像。
你可能会这样叫它
- “圆形的头像”
- “显示名字首字母的小圆圈”
- “右上角的账户图标”
- “叠在一起的一排头像”
- “评论旁边的用户照片”
……它的名字是 头像（Avatar）。
代码里叫什么
| Web (HTML) | <img alt=""> border-radius: 50% object-fit: cover |
|---|---|
| React (MUI) | Avatar AvatarGroup |
| React (shadcn/ui) | Avatar AvatarImage AvatarFallback AvatarGroup |
| Flutter | CircleAvatar |
| SwiftUI | AsyncImage .clipShape(Circle()) |
| Jetpack Compose | Modifier.clip(CircleShape) 没有头像组件：把图片（常用 Coil 的 AsyncImage 加载）裁成圆形 |
复制给 AI 编程工具
给这个列表加上头像：40px 的圆形，显示每个人的照片，用 object-fit: cover 裁满。照片加载中或没有照片时，显示姓名首字母，底色按名字固定取一种颜色，绝不显示裂图。名字已经印在旁边时 alt 留空，没有名字时用名字作 alt；只有需要显示在线状态时才在右下角加一个小绿点；多人时叠放三个头像，其余显示“+5”。