Image
Image
Importimport { Image } from 'antd'; |
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| alt | Image description | string | - | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| fallback | Fallback URL when load fails | string | - | 5.28.0 | |
| height | Image height | string | number | - | × | |
| placeholder | Loading placeholder, supports ReactNode or config object | PlaceholderType | - | × | |
| preview | Preview configuration; set to false to disable | boolean | PreviewType | true | preview.closeIcon: 5.14.0, preview.mask: 6.0.0, preview.mask.closable: 6.4.0 | |
| src | Image URL | string | - | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| width | Image width | string | number | - | × | |
| onError | Callback when loading error occurs | (event: Event) => void | - | × |
Other Property ref <img>
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| progress | Progress config, set to true to show gradient animation, set { percent: number } to show progress, render for custom rendering | boolean | ImageProgressConfig | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| percent | Progress value | number | - | |
| render | Custom rendering, receives default progress UI and percentage | (progress: React.ReactNode, percent: number) => React.ReactNode | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actionsRender | Custom toolbar render | (originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode | - | |
| closeIcon | Custom close icon | React.ReactNode | - | |
| cover | Custom preview mask | React.ReactNode | CoverConfig | - | CoverConfig support after v6.0 |
| focusTrap | Whether to trap focus within the preview when open | boolean | true | 6.4.0 |
| 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 | - | |
| mask | preview mask effect | boolean | { enabled?: boolean, blur?: boolean, closable?: boolean } | true | mask.closable: 6.4.0 |
| Thumbnail mask class name; please use 'classNames.cover' instead | string | - | ||
| maxScale | Maximum zoom scale | number | 50 | |
| minScale | Minimum zoom scale | number | 1 | |
| movable | Whether the preview image can be dragged when it is larger than the viewport | 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, CSSProperties> | - | |
| 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 |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| 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 | - | |
| closeIcon | Custom close icon | React.ReactNode | - | |
| countRender | Custom preview count render | (current: number, total: number) => React.ReactNode | - | |
| focusTrap | Whether to trap focus within the preview when open | boolean | true | 6.4.0 |
| 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 | - | |
| mask | preview mask effect | boolean | { enabled?: boolean, blur?: boolean, closable?: boolean } | true | mask.closable: 6.4.0 |
| Thumbnail mask class name; please use 'classNames.cover' instead | string | - | ||
| minScale | Minimum zoom scale | number | 1 | |
| maxScale | Maximum zoom scale | number | 50 | |
| movable | Whether the preview image can be dragged when it is larger than the viewport | 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, CSSProperties> | - | |
| 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;}
type CoverConfig = {coverNode?: React.ReactNode; // The custom node of preview maskplacement?: 'top' | 'bottom' | 'center'; // Set the position of the preview mask display.};
| 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 |
| progressAnimationDuration | Base duration of loading animation | string | 3s |
| zIndexPopup | z-index of preview popup | number | 1080 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgBase | Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code! | string | #fff |
| colorBgContainerDisabled | Control the background color of container in disabled state. | string | rgba(0,0,0,0.04) |
| colorBgMask | The background color of the mask, used to cover the content below the mask, Modal, Drawer, Image and other components use this token | string | rgba(0,0,0,0.45) |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| colorTextSecondary | The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc. | string | rgba(0,0,0,0.65) |
| borderRadiusXS | XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius. | number | 2 |
| controlHeightLG | LG component height | number | 40 |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginSM | Control the margin of an element, with a medium-small size. | number | 12 |
| marginXL | Control the margin of an element, with an extra-large size. | number | 32 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | |
| motionEaseOut | Preset motion curve. | string | |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingSM | Control the small padding of the element. | number | 12 |
