angular 图片引入_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

指令后面可替换默认图片路径，不写的话默认图片在指令里面配置