angular--解決angular圖片加載失敗問題

基於angular4寫的一個指令，在ionic3.x項目在用。因為加載圖片超時等原因導致圖片顯示不出來，需要替換成默認或者指定圖片

1.err-src.ts

import { Directive,Input } from '@angular/core';
@ Directive({
  selector: '[err-src]', // Attribute selector
  host: {
    '(error)': 'onError($event.target)'
  }
})
export class ErrSrcDirective {

  constructor() {}

  private image = './assets/img/store_list/mo_icon_1.png';

  @Input('err-src')
  set backImg(img:string) {
    if (img) this.image = img;
  }

  onError(e) {
    e.src = this.image;
  }
}

　　

2.err-src.module.ts

import { NgModule } from '@angular/core';
import { ErrSrcDirective } from './err-src';
@NgModule({
  declarations: [ErrSrcDirective],
  imports: [],
  exports: [ErrSrcDirective]
})
export class ErrSrcDirectiveModule {}

　　

3.用法 ：

注入指令

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {MinePage} from './mine';
import {HttpClientModule} from '@angular/common/http';
import { ErrSrcDirectiveModule } from '../../directives/err-src/err-src.module';

@NgModule({
  declarations: [
    MinePage,
  ],
  imports: [
    IonicPageModule.forChild(MinePage),
    HttpClientModule,
    ErrSrcDirectiveModule,
  ],
})
export class MinePageModule {
}

html

<img src="{{baseInfo.photo || './assets/img/df-u-img.png'}}" err-src="./assets/img/df-u-img.png" alt="">
指令后面可替換默認圖片路徑，不寫的話默認圖片在指令里面配置