Image
IMPORT MODULE

Will be removed in 14.0.0, please use nz-image instead.

like src, but more features:

  • Support WeChat, qq avatar thumbnail rule

  • Support remove http&https protocol

  • Support onerror events

  • Support use HttpClient to request image resources, Automatically converted to Base64, generally used to request image resources that require authorization

  • Support preview image

Examples

Basic

Used size to automatically load thumbnails for WeChat images.

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';
}
Via Http

Use HttpClient to request image resources, Automatically converted to Base64, generally used to request image resources that require authorization.

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';
}
Fail load

Automatically replaces the failed image.

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';
}
Preview image

Use HttpClient to request image resources, Automatically converted to Base64, generally used to request image resources that require authorization.

Click to preview large image via previewSrc, previewModalOptions can be adjusted nzmodalservice parameters.

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

PropertyDescriptionTypeDefaultGlobal Config
[size]Size of imagenumber64
[error]Replaces failed imagestring./assets/img/logo.svg
[useHttp]Whether to use HttpClient to request image resourcesbooleanfalse-
[previewSrc]Image of the previewstring--
[previewModalOptions]Modal options of the preview modalModalOptions-