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 | - | |
| classNames | Custom semantic structure class names | Record<SemanticDOM, string> | - | |
| fallback | Fallback URL when load fails | string | - | |
| height | Image height | string | number | - | |
| placeholder | Loading placeholder; if true, uses default placeholder | ReactNode | - | |
| preview | Preview configuration; set to false to disable | boolean | PreviewType | true | |
| src | Image URL | string | - | |
| styles | Custom semantic structure styles | Record<SemanticDOM, string> | - | |
| width | Image width | string | number | - | |
| onError | Callback when loading error occurs | (event: Event) => void | - |
Other Property ref <img>
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actionsRender | Custom toolbar render | (originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode | - | |
| classNames | Custom semantic structure class names | Record<SemanticDOM, string> | - | |
| closeIcon | Custom close icon | React.ReactNode | - | |
| cover | Custom preview mask | React.ReactNode | - | |
| Destroy child elements on preview close (removed, no longer supported) | boolean | false | ||
| Force render preview image (removed, no longer supported) | boolean | - | ||
| getContainer | Specify container for preview mounting; still full screen; false mounts at current location | string | HTMLElement | (() => HTMLElement) | false | - | |
| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo }) => React.ReactNode | - | |
| Thumbnail mask, please use 'cover' instead | ReactNode | - | ||
| Thumbnail mask class name; please use 'classNames.cover' instead | string | - | ||
| maxScale | Maximum zoom scale | number | 50 | |
| minScale | Minimum zoom scale | number | 1 | |
| movable | Whether it is movable | boolean | true | |
| open | Whether to display preview | boolean | - | |
| rootClassName | Root DOM class name for preview; applies to both image and preview wrapper | string | - | |
| scaleStep | Each step's zoom multiplier is 1 + scaleStep | number | 0.5 | |
| src | Custom preview src | string | - | |
| styles | Custom semantic structure styles | Record<SemanticDOM, string> | - | |
| Custom toolbar; please use 'actionsRender' instead | (originalNode: React.ReactElement, info: Omit<ToolbarRenderInfoType, 'current' | 'total'>) => React.ReactNode | - | ||
| Whether to show; please use 'open' instead | boolean | - | ||
| onOpenChange | Callback when preview open state changes | (visible: boolean) => void | - | |
| onTransform | Callback for preview transform changes | { transform: TransformType, action: TransformAction } | - | |
| Callback when 'visible' changes; please use 'onOpenChange' instead | (visible: boolean, prevVisible: boolean) => void | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| fallback | Fallback URL for load error | string | - | |
| items | Array of preview items | string[] | { src: string, crossOrigin: string, ... }[] | - | |
| preview | Preview configuration; disable by setting to false | boolean | PreviewGroupType | true |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actionsRender | Custom toolbar render | (originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode | - | |
| classNames | Custom preview class names object | Record<SemanticDOM, string> | - | |
| closeIcon | Custom close icon | React.ReactNode | - | |
| countRender | Custom preview count render | (current: number, total: number) => React.ReactNode | - | |
| current | Index of the current preview image | number | - | |
| Force render preview image (removed, no longer supported) | boolean | - | ||
| getContainer | Specify container for preview mounting; still full screen; false mounts at current location | string | HTMLElement | (() => HTMLElement) | false | - | |
| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo, current: number }) => React.ReactNode | - | |
| Thumbnail mask, please use 'cover' instead | ReactNode | - | ||
| Thumbnail mask class name; please use 'classNames.cover' instead | string | - | ||
| minScale | Minimum zoom scale | number | 1 | |
| maxScale | Maximum zoom scale | number | 50 | |
| movable | Whether movable | boolean | true | |
| open | Whether to display preview | boolean | - | |
| Root DOM class name for preview; applies to both image and preview wrapper. Use 'classNames.root' instead | string | - | ||
| styles | Custom semantic structure styles | Record<SemanticDOM, string> | - | |
| scaleStep | Each step's zoom multiplier is 1 + scaleStep | number | 0.5 | |
| Custom toolbar; please use 'actionsRender' instead | (originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode | - | ||
| Whether to show; please use 'open' instead | boolean | - | ||
| onOpenChange | Callback when preview open state changes, includes current preview index | (visible: boolean, info: { current: number }) => void | - | |
| onChange | Callback when changing preview image | (current: number, prevCurrent: number) => void | - | |
| onTransform | Callback for preview transform changes | { transform: TransformType, action: TransformAction } | - | |
| Callback when 'visible' changes; please use 'onOpenChange' instead | (visible: boolean, prevVisible: boolean, current: number) => void | - |
{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
