# 头像 Avatar

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/avatar
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

用来代表用户或事物。

## 安装

```bash
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](/zh/components/image) 组件的 `alt` `lazy` `onClick` `onError` `onLoad` 属性。

### CSS 变量

| 属性            | 说明             | 默认值 | 全局变量                     |
| --------------- | ---------------- | ------ | ---------------------------- |
| --border-radius | 圆角             | `4px`  | `--adm-avatar-border-radius` |
| --size          | 大小，宽度和高度 | `44px` | `--adm-avatar-size`          |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt