category	type	title	cover
Components	Data Display	Image	https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg

Previewable image.

When To Use

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

import { NzImageModule } from 'ng-zorro-antd/image';

API

Property	Description	Type	Default	Global Config
nzSrc	Image path	`string`	-	-
nzFallback	Load failure fault-tolerant src	`string`	-	✅
nzPlaceholder	Load placeholder src	`string`	-	✅
nzDisablePreview	Whether to disable the preview	`boolean`	`false`	✅
nzCloseOnNavigation	Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy).	`boolean`	`false`	✅
nzDirection	Text directionality	`Direction`	`'ltr'`	✅

Other attributes <img>

Property	Description	Type	Default
images	Preview images	`NzImage[]`	-
options	Preview options	`NzImagePreviewOptions`	-

Property	Description	Type	Default
src	src	`string`	-
alt	alt	`string`	-
width	width	`string`	-
height	height	`string`	-

Property	Description	Type	Default
nzKeyboard	Whether support press `esc` to close, press `left` or `right` to switch image	`boolean`	`true`
nzMaskClosable	Whether to close the image preview when the mask (area outside the image) is clicked	`boolean`	`true`
nzCloseOnNavigation	Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy).	`boolean`	`true`
nzZIndex	The z-index of the image preview	`number`	1000
nzZoom	Zoom rate	`number`	1
nzRotate	Rotate rate	`number`	0