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
加载中

API#

[nz-image]#

参数说明类型默认值支持全局配置
nzSrc图片地址string--
nzFallback加载失败容错地址string-
nzPlaceholder加载占位地址string-
nzDisablePreview是否禁止预览booleanfalse
nzCloseOnNavigation当用户在历史中前进/后退时是否关闭预览。注意,这通常不包括点击链接(除非用户使用HashLocationStrategy)。booleanfalse
nzDirection文字方向Direction'ltr'

其他属性见 <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

NzImagePreviewRef#

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