# Avatar

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/avatar
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Used to represent a user or thing.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Used to represent a user or thing.

## When to Use

It is necessary to show the characteristics of people or things more intuitively.

## Demos

## Avatar

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| fallback | The fallback placeholder. | `ReactNode` | The default fallback image. |
| fit | The fill mode of the image | `'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'` | `'cover'` |
| src | The address of avatar. | `string` | - |

In addition, the following props of [Image](/components/image) are also supported: `alt` `lazy` `onClick` `onError` `onLoad`.

### CSS Variables

| Name | Description | Default | Global |
| --- | --- | --- | --- |
| --border-radius | The border radius. | `4px` | `--adm-avatar-border-radius` |
| --size | The width and height of avatar. | `44px` | `--adm-avatar-size` |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt