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.

expand codeexpand code
      Loading...
    

You can make preview controlled.

expand codeexpand code
      Loading...
    

API#

[nz-image]#

PropertyDescriptionTypeDefaultGlobal Config
nzSrcImage pathstring--
nzFallbackLoad failure fault-tolerant srcstring-
nzPlaceholderLoad placeholder srcstring-
nzDisablePreviewWhether to disable the previewbooleanfalse
nzCloseOnNavigationWhether 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).booleanfalse
nzDirectionText directionalityDirection'ltr'
nzScaleStep1 + nzScaleStep is the step to increase or decrease the scalenumber0.5

Other attributes <img>

NzImageService#

PropertyDescriptionTypeDefault
imagesPreview imagesNzImage[]-
optionsPreview optionsNzImagePreviewOptions-

NzImage#

PropertyDescriptionTypeDefault
srcsrcstring-
altaltstring-
widthwidthstring-
heightheightstring-

NzImagePreviewOptions#

PropertyDescriptionTypeDefault
nzKeyboardWhether support press esc to close, press left or right to switch imagebooleantrue
nzMaskClosableWhether to close the image preview when the mask (area outside the image) is clickedbooleantrue
nzCloseOnNavigationWhether 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).booleantrue
nzZIndexThe z-index of the image previewnumber1000
nzZoomZoom ratenumber1
nzRotateRotate ratenumber0
nzScaleStep1 + nzScaleStep is the step to increase or decrease the scalenumber0.5
nzFlipHorizontallyFlip image on horizontal vectorbooleanfalse
nzFlipVerticallyFlip image on vertical vectorbooleanfalse

NzImagePreviewRef#

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

NzImageGroupComponent#

PropertyDescriptionTypeDefault
nzScaleStepThe value of nzScaleStep will be applied to all the images inside, unless an image has its own nzScaleStep value specified.number-