angular--解决angular图片加载失败问题

基于angular7写的一个指令，在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="">
指令后面可替换默认图片路径，不写的话默认图片在指令里面配置