# Image

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

Previewable pictures.

## 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.

Previewable pictures.

## When to Use

- Use when you need to show pictures.
- Display loading when loading large images or fault-tolerant handling when loading fails.

## Demos

## Image

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| alt | The description of the image | `string` | - |
| draggable | Whether to allow users to drag the image | `boolean` | `false` |
| fallback | Placeholder when failed to load | `ReactNode` | default placeholder |
| fit | The fill mode of the image | `'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'` | `'fill'` |
| height | The height of the image, if a number is passed in, the unit is `px` | `string \| number` | - |
| lazy | Whether to load image lazily | `boolean` | `false` |
| onClick | The image click event | `(event: React.MouseEvent<HTMLImageElement, Event>) => void` | - |
| onContainerClick | The content click event | `(event: React.MouseEvent<HTMLDivElement, Event>) => void` | - |
| onError | Callback when failed to load | `(event: React.SyntheticEvent<HTMLImageElement, Event>) => void` | - |
| onLoad | Triggered when image loaded | `(event: React.SyntheticEvent<HTMLImageElement, Event>) => void` | - |
| placeholder | Placeholder when loading | `ReactNode` | default placeholder |
| src | The address of the image | `string` | - |
| width | The width of the image, if a number is passed in, the unit is `px` | `string \| number` | - |

In addition, the following HTML native attributes are also supported: `crossOrigin`、`decoding`、`loading`、`referrerPolicy`、`sizes`、`srcSet`、`useMap`

`width` `height` props is not conflict with `--width` `--height`. These components props is actually based on CSS variables, and exists only as a convenient way to set CSS variables.

### CSS Variables

| Name     | Description          | Default | Global               |
| -------- | -------------------- | ------- | -------------------- |
| --height | The height of image. | `auto`  | `--adm-image-height` |
| --width  | The width of image.  | `auto`  | `--adm-image-width`  |

## FAQ

### How to make Image change from block element to inline-block element?

Image is rendered as a block element by default. If you need to make it an inline-block element, you can nest an inline-block container in the outer layer, for example:

```jsx
<div style={{ display: 'inline-block' }}>
  <Image />
</div>
```

### What is the difference between `onContainerClick` and `onClick`?

`onContainerClick` is the container click event, and `onClick` is the image click event. `onClick` will not fire before the image is loaded successfully or after the image fails to load, but `onContainerClick` can be fired normally.

---

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