Avatar 头像

代表用户或对象的图标，支持图片、文字、自定义文本。

何时使用

• 用户列表、评论、消息中显示用户身份
• 当头像没有图片时，用文字首字母替代

基本使用

最简单的方式 —— 传 name，组件按规则提取最后/前两个字符。

不同尺寸

width / height 控制头像大小（单位 px）。

方形头像

is-round=false 渲染为方形，常用于品牌、产品图标。

图片头像

img-src 指定图片地址。图片加载失败时回退到文字。fit 控制图片填充方式（同 CSS object-fit）。

自定义显示文字

custom-text 优先级高于 name，按原文展示，不做提取。

性别配色

gender 影响默认背景色。

单字符 / Emoji 头像

custom-text 可放任意字符（emoji / 符号 / 单汉字），适合代表「身份徽章」「机器人 / 系统」「VIP」等。

加载失败回退

img-src 加载失败时，自动回退到文字头像（custom-text > name 的字符提取）。

用户列表场景

头像 + 姓名 + 描述的典型列表项排版。

评论头像

评论场景下头像在左、内容在右的典型布局。

显示规则

• 优先级：imgSrc > customText > name
• 文字提取规则：
  1. 中文开头：取最后两个字符
  2. 英文开头：取前两个字符
  3. 多个英文名连用：取每个英文名的首字母
  4. 非中英文开头：取前两个字符

API

Props

参数	类型	默认值	说明
name	string	-	用于生成头像文字（可不传，回退到默认占位）
gender	'male' | 'female' | string	-	影响默认背景色
width	number	36	宽度（px）
height	number	36	高度（px）
isRound	boolean	true	是否圆形
imgSrc	string	-	自定义图片
customText	string	-	自定义文字（不做提取）
fit	'fill' | 'contain' | 'cover' | 'none' | 'scale-down'	cover	图片填充方式