_src 显示图像

等同于 src，但相比较更多功能：

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

• 支持移除http&https协议http

• 支持增加onerror事件

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

import { ImageModule } from '@delon/abc/image';

代码演示

基础

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

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，一般用于请求需要授权的图像资源。

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

无法加载图像

自动替换加载失败图像。

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

API

_src