Image
Image
Preview-able image.
Importimport{ Image }from"antd"; |
Sourcecomponents/image |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Common props ref：Common props
| 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 |
Other attributes <img>
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| visible | Whether the preview dialog is visible or not | boolean | - | - |
| src | Custom preview src | string | - | 4.10.0 |
| getContainer | The mounted node for preview dialog but still display at fullScreen | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 |
| movable | whether can be moved | boolean | true | 5.8.0 |
| mask | Thumbnail mask | ReactNode | - | 4.9.0 |
| maskClassName | The className of the mask | string | - | 4.11.0 |
| rootClassName | The classname of the preview root DOM | string | - | 5.4.0 |
| scaleStep | 1 + scaleStep is the step to increase or decrease the scale | number | 0.5 | - |
| minScale | Min scale | number | 1 | 5.7.0 |
| maxScale | Max scale | number | 50 | 5.7.0 |
| closeIcon | Custom close icon | React.ReactNode | - | 5.7.0 |
| forceRender | Force render preview dialog | boolean | - | - |
| toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: Omit<ToolbarRenderInfoType, 'current' | 'total'>) => React.ReactNode | - | 5.7.0, info.image: 5.18.0 |
| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo }) => React.ReactNode | - | 5.7.0, image: 5.18.0 |
| destroyOnClose | Destroy child elements when closing preview | boolean | false | |
| onTransform | Callback when the transform of image changed | { transform: TransformType, action: TransformAction } | - | 5.7.0 |
| onVisibleChange | Callback when visible changed | (visible: boolean, prevVisible: boolean) => void | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| preview | Preview config, disabled when false | boolean | PreviewGroupType | true | 4.6.0 PreviewGroupType:4.7.0 |
| items | Preview items | string[] | { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
| fallback | Load failure fault-tolerant src | string | - | 5.7.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| visible | Whether the preview dialog is visible or not | boolean | - | - |
| getContainer | The mounted node for preview dialog but still display at fullScreen | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 |
| movable | whether can be moved | boolean | true | 5.8.0 |
| current | The index of the current preview | number | - | 4.12.0 |
| mask | Thumbnail mask | ReactNode | - | 4.9.0 |
| maskClassName | The className of the mask | string | - | 4.11.0 |
| rootClassName | The classname of the preview root DOM | string | - | 5.4.0 |
| scaleStep | 1 + scaleStep is the step to increase or decrease the scale | number | 0.5 | - |
| minScale | Min scale | number | 1 | 5.7.0 |
| maxScale | Max scale | number | 50 | 5.7.0 |
| closeIcon | Custom close icon | React.ReactNode | - | 5.7.0 |
| forceRender | Force render preview dialog | boolean | - | - |
| countRender | Custom preview count content | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
| toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode | - | 5.7.0, info.image: 5.18.0 |
| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo, current: number }) => React.ReactNode | - | 5.7.0, image: 5.18.0 |
| onTransform | Callback when the transform of image changed | { transform: TransformType, action: TransformAction } | - | 5.7.0 |
| onChange | Callback when switch preview image | (current: number, prevCurrent: number) => void | - | 5.3.0 |
| onVisibleChange | Callback when visible changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current Property 5.3.0 |
{x: number;y: number;rotate: number;scale: number;flipX: boolean;flipY: boolean;}
type TransformAction =| 'flipY'| 'flipX'| 'rotateLeft'| 'rotateRight'| 'zoomIn'| 'zoomOut'| 'close'| 'prev'| 'next'| 'wheel'| 'doubleClick'| 'move'| 'dragRebound';
{icons: {flipYIcon: React.ReactNode;flipXIcon: React.ReactNode;rotateLeftIcon: React.ReactNode;rotateRightIcon: React.ReactNode;zoomOutIcon: React.ReactNode;zoomInIcon: React.ReactNode;};actions: {onActive?: (index: number) => void; // support after 5.21.0onFlipY: () => void;onFlipX: () => void;onRotateLeft: () => void;onRotateRight: () => void;onZoomOut: () => void;onZoomIn: () => void;onReset: () => void; // support after 5.17.3onClose: () => void;};transform: TransformType,current: number;image: ImgInfo}
{url: string;alt: string;width: string | number;height: string | number;}
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| previewOperationColor | Color of preview operation icon | string | rgba(255,255,255,0.65) |
| previewOperationColorDisabled | Disabled color of preview operation icon | string | rgba(255,255,255,0.25) |
| previewOperationHoverColor | Color of hovered preview operation icon | string | rgba(255,255,255,0.85) |
| previewOperationSize | Size of preview operation icon | number | 18 |
| zIndexPopup | z-index of preview popup | number | 1080 |
Click the image to zoom in.
Load failed to display image placeholder.
Progressive when large image loading.
Click the left and right switch buttons to preview multiple images.
Preview a collection from one image.
You can set different preview image.
You can make preview controlled.
You can customize the toolbar and add a button for downloading the original image or downloading the flipped and rotated image.
You can customize the preview content.
Nested in the modal
