Ant Design

⌘ K

5.21.3

Image

Preview-able image.

가져오기import{ Image }from"antd";

소스components/image

문서

이 페이지 수정 변경 로그

Ant Design

⌘ K

5.21.3

Image

Preview-able image.

가져오기import{ Image }from"antd";

소스components/image

문서

이 페이지 수정 변경 로그

When To Use

When you need to display pictures.
Display when loading a large image or fault tolerant handling when loading fail.

Examples

API

Common props ref：Common props

Image

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>

PreviewType

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	-	-

PreviewGroup

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

PreviewGroupType

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

Interface

TransformType

{
  x: number;
  y: number;
  rotate: number;
  scale: number;
  flipX: boolean;
  flipY: boolean;
}

TransformAction

type TransformAction =
  | 'flipY'
  | 'flipX'
  | 'rotateLeft'
  | 'rotateRight'
  | 'zoomIn'
  | 'zoomOut'
  | 'close'
  | 'prev'
  | 'next'
  | 'wheel'
  | 'doubleClick'
  | 'move'
  | 'dragRebound';

ToolbarRenderInfoType

{
  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.0
    onFlipY: () => void;
    onFlipX: () => void;
    onRotateLeft: () => void;
    onRotateRight: () => void;
    onZoomOut: () => void;
    onZoomIn: () => void;
    onReset: () => void; // support after 5.17.3
    onClose: () => void;
  };
  transform: TransformType,
  current: number;
  image: ImgInfo
}

ImgInfo

{
  url: string;
  alt: string;
  width: string | number;
  height: string | number;
}

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
previewOperationColor	预览操作图标颜色	string	rgba(255, 255, 255, 0.65)
previewOperationColorDisabled	预览操作图标禁用颜色	string	rgba(255, 255, 255, 0.25)
previewOperationHoverColor	预览操作图标悬浮颜色	string	rgba(255, 255, 255, 0.85)
previewOperationSize	预览操作图标大小	number	18
zIndexPopup	预览浮层 z-index	number	1080

글로벌 토큰어떻게 사용하나요?

When To Use

When you need to display pictures.
Display when loading a large image or fault tolerant handling when loading fail.

Examples

API

Common props ref：Common props

Image

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>

PreviewType

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	-	-

PreviewGroup

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

PreviewGroupType

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

Interface

TransformType

{
  x: number;
  y: number;
  rotate: number;
  scale: number;
  flipX: boolean;
  flipY: boolean;
}

TransformAction

type TransformAction =
  | 'flipY'
  | 'flipX'
  | 'rotateLeft'
  | 'rotateRight'
  | 'zoomIn'
  | 'zoomOut'
  | 'close'
  | 'prev'
  | 'next'
  | 'wheel'
  | 'doubleClick'
  | 'move'
  | 'dragRebound';

ToolbarRenderInfoType

{
  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.0
    onFlipY: () => void;
    onFlipX: () => void;
    onRotateLeft: () => void;
    onRotateRight: () => void;
    onZoomOut: () => void;
    onZoomIn: () => void;
    onReset: () => void; // support after 5.17.3
    onClose: () => void;
  };
  transform: TransformType,
  current: number;
  image: ImgInfo
}

ImgInfo

{
  url: string;
  alt: string;
  width: string | number;
  height: string | number;
}

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
previewOperationColor	预览操作图标颜色	string	rgba(255, 255, 255, 0.65)
previewOperationColorDisabled	预览操作图标禁用颜色	string	rgba(255, 255, 255, 0.25)
previewOperationHoverColor	预览操作图标悬浮颜色	string	rgba(255, 255, 255, 0.85)
previewOperationSize	预览操作图标大小	number	18
zIndexPopup	预览浮层 z-index	number	1080