COMPONENT 62 · Content & Media
头像
Avatar
也叫Profile ImageUserpic用户头像NSImageView
用人物照片、首字母或图标表示用户或实体。
Represents a person or entity with a photo, initials, or icon.
ANATOMY & USAGE
结构与使用建议
组成部分
- 图片或首字母
- 形状容器
- 可选状态徽标
适合使用
- 需要在列表、评论或账户入口中快速识别人时。
不建议使用
- 真实身份很重要但头像可能不准确或相似时。
键盘与无障碍
- 信息性图片提供姓名替代文本；若旁边已有同名文字，可将头像标为装饰。
DESCRIBE IT TO AI
这样告诉编程助手
实现头像（Avatar）：用人物照片、首字母或图标表示用户或实体。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo row">
<span class="avatar" role="img" aria-label="林晨的头像">林</span>
<span>林晨</span>
</div>