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="">
指令后面可替换默认图片路径,不写的话默认图片在指令里面配置
发布了105 篇原创文章 · 获赞 114 · 访问量 24万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章