Image图片

可预览的图片。

何时使用#

  • 需要展示图片时使用。
  • 加载大图时渐进加载或加载失败时容错处理。
import { NzImageModule } from 'ng-zorro-antd/image';

代码演示

基本用法

单击图像可以放大显示。

expand codeexpand code
      加载中
渐进加载

大图使用 placeholder 渐进加载。

expand codeexpand code
      加载中
服务方式创建预览层

图片预览的 Service 用法，示例中包含使用 Service 创建单张或多张图片预览的用法

expand codeexpand code
      加载中
容错处理

加载失败显示图像占位符。

expand codeexpand code
      加载中
多张图片预览

点击左右切换按钮可以预览多张图片。

expand codeexpand code
      加载中
受控的预览

可以使预览受控。

expand codeexpand code
      加载中

API#

[nz-image]#

参数说明类型默认值支持全局配置
nzSrc图片地址string--
nzFallback加载失败容错地址string-✅
nzPlaceholder加载占位地址string-✅
nzDisablePreview是否禁止预览booleanfalse✅
nzCloseOnNavigation当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用 HashLocationStrategy）。booleanfalse✅
nzDirection文字方向Direction'ltr'✅
nzScaleStep1 + nzScaleStep 为缩放放大的每步倍数number0.5✅

其他属性见 <img>

NzImageService#

参数说明类型默认值
images预览图片NzImage[]-
options预览参数NzImagePreviewOptions-

相关类型定义#

NzImage#

参数说明类型默认值
srcsrcstring-
altaltstring-
width图片宽度string-
height图片高度string-

NzImagePreviewOptions#

参数说明类型默认值
nzKeyboard是否支持键盘 esc 关闭、左右键切换图片booleantrue
nzMaskClosable点击蒙层是否允许关闭booleantrue
nzCloseOnNavigation当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用 HashLocationStrategy）。booleantrue
nzZIndex设置预览层的 z-indexnumber1000
nzZoom缩放比例number1
nzRotate旋转角度number0
nzScaleStep1 + nzScaleStep 为缩放放大的每步倍数number0.5
nzFlipHorizontally在水平向量上翻转图像booleanfalse
nzFlipVertically在垂直向量上翻转图像booleanfalse

NzImagePreviewRef#

名称描述
switchTo(index: number): void设置预览索引
prev(): void上一张
next(): void下一张
close(): void关闭预览

NzImageGroupComponent#

名称描述类型默认值
nzScaleStep1 + nzScaleStep 为缩放放大的每步倍数number-