头像 Avatar
用来代表用户或事物。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
用来代表用户或事物。
何时使用
需要更加直观的展现人物或事物特征。
示例
Avatar
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| fallback | 占位图 | ReactNode | 默认占位图 |
| fit | 图片填充模式 | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | 'cover' |
| src | 头像的图片地址 | string | - |
此外，还支持 Image 组件的 alt lazy onClick onError onLoad 属性。
CSS 变量
| 属性 | 说明 | 默认值 | 全局变量 |
|---|---|---|---|
| --border-radius | 圆角 | 4px | --adm-avatar-border-radius |
| --size | 大小，宽度和高度 | 44px | --adm-avatar-size |