Image

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

Examples

Click the image to preview.

expand codeexpand code
Loading...

Progressive when large image loading.

expand codeexpand code
Loading...

The usage of NzImageService for images preview, the example includes the usage of using NzImageService to create single or multiple images preview

expand codeexpand code
Loading...

Load failed to display image placeholder.

expand codeexpand code
Loading...

Click the left and right switch buttons to preview multiple images.

API#

[nz-image]#

PropertyDescriptionTypeDefaultGlobal Config
nzSrcImage pathstring--
nzFallbackLoad failure fault-tolerant srcstring-
nzPlaceholderLoad placeholder srcstring-
nzDisablePreviewWhether to disable the previewbooleanfalse
nzCloseOnNavigationClose preview while navigatingbooleanfalse
nzDirectionText directionalityDirection'ltr'

Other attributes <img>

NzImageService#

PropertyDescriptionTypeDefault
imagesPreview imagesNzImage[]-
optionsPreview optionsNzImagePreviewOptions-

NzImage#

PropertyDescriptionTypeDefault
srcsrcstring-
altaltstring-
widthwidthstring-
heightheightstring-

NzImagePreviewOptions#

PropertyDescriptionTypeDefault
nzKeyboardWhether support press esc to closebooleantrue
nzMaskClosableWhether to close the image preview when the mask (area outside the image) is clickedbooleantrue
nzCloseOnNavigationWhether to close the image preview when the navigation history changesbooleantrue
nzZIndexThe z-index of the image previewnumber1000
nzZoomZoom ratenumber1
nzRotateRotate ratenumber0

NzImagePreviewRef#

NameDescription
switchTo(index: number): voidSwitch to index
prev(): voidPrevious image
next(): voidNext image
close(): voidClose image preview