ant-design/components/image/index.en-US.md

category	group	title	cols	cover	coverDark
Components	Data Display	Image	2	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original

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 Custom component token

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, current: number) => void; // `current` only support after v5.3.0
  getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0 The mounted node for preview dialog but still display at fullScreen
  src?: string; // v4.10.0
  mask?: ReactNode; // v4.9.0
  maskClassName?: string; // v4.11.0
  rootClassName?: string; // only support after v5.4.0
  current?: number; // v4.12.0 Only support PreviewGroup
  countRender?: (current: number, total: number) => string  // v4.20.0 Only support PreviewGroup
  scaleStep?: number;
  onChange?: (current: number, prevCurrent: number) => void; // only support after v5.3.0
}

Other attributes <img>

Design Token