Image图片

可预览的图片。

何时使用#

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

代码演示

单击图像可以放大显示。

expand codeexpand code
加载中

大图使用 placeholder 渐进加载。

expand codeexpand code
加载中

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

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关闭预览