显示图像
IMPORT MODULE

将会在 14.0.0 时被移除,请使用 nz-image 替代。

等同于 src,但相比较更多功能:

  • 支持微信、qq头像规则缩略图规则

  • 支持移除http&https协议http

  • 支持增加onerror事件

  • 支持使用 HttpClient 来获取图像资源,自动转化成 Base64,一般用于请求需要授权的图像资源

  • 支持预览大图

代码演示

基础

设置 size 自动对微信图像加载缩略图。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-image-basic',
  template: `
    <img [_src]="src" size="46" />
    <img [_src]="src" size="64" />
    <img [_src]="src" size="96" />
  `,
})
export class ComponentsImageBasicComponent {
  src = '//wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLL1byctY955Htv9ztzVlIzY9buI9zRLg5QrkpOynrmObArKicy9icIX7aVgv3UqIbeIEo2xuUtsqYw/0';
}
通过 Http

使用 HttpClient 来获取图像资源,自动转化成 Base64,一般用于请求需要授权的图像资源。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-image-http',
  template: ` <img [_src]="src" useHttp /> `,
})
export class ComponentsImageHttpComponent {
  src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
}
无法加载图像

自动替换加载失败图像。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-image-error',
  template: `
    <button nz-button (click)="src = '//a.com/1.png'">Load an error image</button>
    <div style="margin-top: 8px;">
      <img [_src]="src" error="./assets/img/logo-color.svg" />
    </div>
  `,
})
export class ComponentsImageErrorComponent {
  src = './assets/img/avatar.jpg';
}
预览大图

指定 previewSrc 点击预览大图效果,previewModalOptions 可以调整 nzmodalservice 参数。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-image-preview',
  template: `
    <img [_src]="src" size="46" [previewSrc]="src" />
    <img [_src]="src" size="46" [previewSrc]="src" [previewModalOptions]="{ nzWidth: '80%' }" />
  `,
})
export class ComponentsImagePreviewComponent {
  src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
}

API

_src

参数说明类型默认值全局配置
[size]图像大小number64
[error]替代图像无法加载string./assets/img/logo.svg
[useHttp]是否使用 HttpClient 来请求图像资源booleanfalse-
[previewSrc]预览图像地址string--
[previewModalOptions]预览对话框参数ModalOptions-