头像
图片头像；图片缺失或加载失败时，用姓名首字（中文取第一个字，英文取首字母）和由姓名决定的颜色代替。
带行为 核心包
示例
代码
<span class="zh-avatar" data-name="张三" data-size="md"></span>
<span class="zh-avatar" data-name="Ada Lovelace" data-size="md"></span>
<span class="zh-avatar" data-name="设计" data-size="md" data-shape="square"></span>
<span class="zh-avatar" data-name="在线" data-size="lg" data-status="success"></span>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-name | .zh-avatar | 字符串 | 姓名；必填，库据此初始化，也是无障碍名称 |
data-src | .zh-avatar | 图片地址 | 头像图片；加载失败自动退回首字 |
data-size | .zh-avatar | xs | sm | md | lg | xl | 尺寸 |
data-shape | .zh-avatar | square | circle（默认） | 方形头像，默认圆形 |
data-icon | .zh-avatar | 图标名 | 用图标代替首字 |
data-status | .zh-avatar | success | warning | danger | primary | 右下角的在线状态点 |
data-tone | 头像 | brand | 用品牌色代替按名字挑选的 8 种分类色，适合一个品牌页里所有头像颜色一致 |
样式类
zh-avatar zh-avatar-face zh-avatar-status zh-avatar-group
无障碍
- 元素带 role="img" 与 aria-label（取姓名）
- 状态点只是装饰，需要传达状态时请在旁边写文字
常见问题
头像是什么？
图片头像；图片缺失或加载失败时，用姓名首字（中文取第一个字，英文取首字母）和由姓名决定的颜色代替。
怎么使用头像？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。
头像支持键盘和读屏吗？
元素带 role="img" 与 aria-label（取姓名）；状态点只是装饰，需要传达状态时请在旁边写文字。
头像需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。