mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
e027cbec1c
* chore: add prettier-ignore in markdown demo * docs: format markdown api table * docs: format markdown api table
2.2 KiB
2.2 KiB
category | group | title | cols | cover |
---|---|---|---|---|
Components | Data Display | Image | 2 | https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg |
Previewable image.
When To Use
- When you need to display pictures.
- Display when loading a large image or fault tolerant handling when loading fail.
Examples
Basic Usage
Fault tolerant
Progressive Loading
Multiple image preview
Preview from one image
Custom preview image
Controlled Preview
Custom preview mask
Top progress customization when previewing multiple images
API
Property | Description | Type | Default | Version |
---|---|---|---|---|
alt | Image description | string | - | 4.6.0 |
fallback | Load failure fault-tolerant src | string | - | 4.6.0 |
height | Image height | string | number | - | 4.6.0 |
placeholder | Load placeholder, use default placeholder when set true |
ReactNode | - | 4.6.0 |
preview | preview config, disabled when false |
boolean | previewType | true | 4.6.0 previewType:4.7.0 |
src | Image path | string | - | 4.6.0 |
width | Image width | string | number | - | 4.6.0 |
onError | Load failed callback | (event: Event) => void | - | 4.12.0 |
rootClassName | add custom className for image root DOM and preview mode root DOM | string | - | 4.20.0 |
previewType
{
visible?: boolean;
onVisibleChange?: (visible, prevVisible) => void;
getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0
src?: string; // v4.10.0
mask?: ReactNode; // v4.9.0
maskClassName?: string; // v4.11.0
current?: number; // v4.12.0 Only support PreviewGroup
countRender?: (current: number, total: number) => string // v4.20.0 Only support PreviewGroup
scaleStep?: number;
}
Other attributes <img>