---
title: Image - 图片
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 4
  title: 数据展示
  path: /dataShow
---

展示和预览图片。

## 基本用法

需要查看图片的时候，单击图片可以放大预览。

<code src="./demos/base.tsx" />

## 错误状态

当加载图片失败的时候显示的内容。

<code src="./demos/error.tsx" />

## 加载状态

默认情况下，加载效果是不显示，一般使用默认加载，大图情况下使用渐进加载。

<code src="./demos/loading.tsx" />

## 多图预览

点击左右切换按钮可以预览多张图片。

<code src="./demos/multiply.tsx" />

## API

| 参数        | 说明                               | 类型                                   | 默认值 |
| ----------- | ---------------------------------- | -------------------------------------- | ------ |
| alt         | 图像描述                           | string                                 | -      | 4.6.0 |
| fallback    | 加载失败容错地址                   | string                                 | -      | 4.6.0 |
| height      | 图像高度                           | string \| number                       | -      | 4.6.0 |
| placeholder | 加载占位, 为 `true` 时使用默认占位 | ReactNode                              | -      | 4.6.0 |
| preview     | 预览参数，为 `false` 时禁用        | boolean \| [previewType](#previewType) | true   | 4.6.0 [previewType](#previewType):4.7.0 |
| src         | 图片地址                           | string                                 | -      | 4.6.0 |
| width       | 图像宽度                           | string \| number                       | -      | 4.6.0 |
| onError     | 加载错误回调                       | (event: Event) => void                 | -      | 4.12.0 |

### previewType

preview 全部自己重构了，对于一些用处不大的属性暂不支持，有需要请提 issue。

```js
{
  visible?: boolean;
  onVisibleChange?: (visible, prevVisible) => void;
  // getContainer?: string | HTMLElement | (() => HTMLElement);
  src?: string; // 仅支持 Image
  // mask?: ReactNode;
  // maskClassName?: string;
  // current?: number; // 仅支持 PreviewGroup
  // countRender?: (current: number, total: number) => string  // 仅支持 PreviewGroup
}
```

其他属性见 [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)