n-avatar 头像
用户 / 事物信息的可视化标识：个人中心、联系人列表、评论区、消息流。内容按 插槽 > 图片 > 文字 > 图标占位 四级自动回退——传了 src 渲染图片，没图时用 text 文字（一般传姓名末字或首字母），连文字都没有时显示人形图标占位。
- 图片加载失败时：有
errorSrc先换备份图，备份也无 / 再失败则回落到文字 / 图标占位，同时派发error事件；外部换成新src会自动复位失败状态size支持三档预设（small 32 / normal 40 / large 56 px）或直接传数值 px；字号与图标按盒宽 0.45 比例自动联动- 上色：
bgColor指定背景色；randomBgColor开启后按内容稳定取功能色（同一人恒同色，联系人列表滚动不跳色），colorIndex可指定色板下标。上色后文字 / 图标自动转白，中性占位时前景为次级灰（随深浅主题）- 形状
circle/square；个别自定义圆角用custom-style="border-radius:12px"覆盖- 默认插槽内容完全接管头像内部（组件看不见插槽内容，插槽存在即优先），可用于自绘图形、徽标叠放等；头像本体是
overflow: hidden的裁剪容器，超界内容会被裁掉
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| src | 头像图片地址（网络 / 本地路径），非空时优先渲染图片 | String | "" | - |
| mode | 图片裁剪模式（image 原生 mode）：aspectFill 短边铺满居中裁剪（头像场景不变形）、scaleToFill 拉伸铺满、widthFix 宽不变高自适应 | String | aspectFill | aspectFit<br/>aspectFill<br/>scaleToFill<br/>widthFix 等 image 原生取值 |
| text | 文字头像内容（src 为空时生效），可传姓名末字（"伟"）、姓名（"王小伟"）或首字母缩写（"ZW"）；字号自适应：放不下自动缩到单行放下（不换行，过长仍单行省略） | String | "" | - |
| icon | 图标名（n-icon）：src 与 text 都为空时的内容 / 占位图形；留空回落默认人形占位 | String | user | n-icon 名称表 |
| shape | 形状：circle 圆形 / square 方形（8px 圆角）；个别自定义圆角用 custom-style="border-radius:12px" 覆盖 | String | circle | circle<br/>square |
| size | 尺寸：三档预设（small 32 / normal 40 / large 56 px）或数值 px；字号与图标按盒宽 0.45 比例联动 | String / Number | normal | small<br/>normal<br/>large<br/>任意数值 |
| bg-color | 背景色；留空 = 中性占位底（随深浅主题）。设置后文字 / 图标前景自动转白 | String | "" | 与 css 相同 |
| color | 文字 / 图标前景色；留空 = 有底色（bgColor / randomBgColor）时白字、中性占位时次级灰 | String | "" | 与 css 相同 |
| random-bg-color | 随机功能色底：按 colorIndex 或 text / src 内容稳定取色（同一内容恒同色，联系人列表滚动不跳色）；bgColor 非空时本项被忽略 | Boolean | false | - |
| color-index | 随机色板下标（0~4，功能色序），-1 = 按 text / src 内容自动取 | Number | -1 | - |
| error-src | 图片加载失败时替换的图片地址；留空 = 直接回落文字 / 图标占位 | String | "" | - |
| name | 业务标识：click / error 事件原样回传，列表代理处理点击时区分来源 | String | "" | - |
| text-style | 微调文字的行内样式，如 "font-weight:600"（页面 class 打不进组件内部） | String | "" | 与 css 相同 |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "margin-right:10px" 用于和相邻元素排间距 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击头像时触发 | name（业务标识原样回传） |
| error | 图片加载失败时触发（已换 errorSrc 或回落占位内容） | name（业务标识原样回传） |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 完全接管头像内部内容（优先级最高）；头像本体是裁剪容器，插槽内容超出画布会被裁掉 |