Ant Design of Angular加载图片失败时使用默认图片

基于Ant Design of Angular和ng-alain写的一个自定义模块，用于加载图片失败后使用默认图片显示

1. 声明组件 （noImg.component.ts）

import { Input, Directive } from '@angular/core';

@Directive({
    selector: '[errorImg]',
    host: {// 增加监听事件，监听图片加载失败
        '(error)': 'onError($event.target)'
    }
})
export class NoImgComponent {

    constructor() { }
    private image = './assets/imgs/no-img.png';// 默认图片地址
    @Input('errorImg')
    set backImg(img: string) {// 使用标签中传入地址进行显示
        if (img) this.image = img;
    }
    onError(e) {// 如果图片加载失败则使用默认图片显示
        e.src = this.image;
    }
}

2. 建立模块 （noimg.module.ts ）

import { NgModule} from '@angular/core';
import { NoImgComponent } from './noImg.component';

@NgModule({
  providers: [
  ],
  declarations: [
    NoImgComponent
  ],
  exports: [NoImgComponent]
})
export class OnImgModule {}

3. 使用方式

a. 在需要使用的模块中引用OnImgModule

import { NgModule } from '@angular/core';
import { SharedModule } from '@shared/shared.module';
import { TemRoutingModule } from './tem-routing.module';
import { TemFileComponent } from './file/file.component';
import { TemQueryComponent } from './query/query.component'; 
import { OnImgModule } from '@core/directive/noImg.module';

const COMPONENTS = [
TemFileComponent,
TemQueryComponent
];

const COMPONENTS_NOROUNT = [];

@NgModule({
  imports: [
    SharedModule,
    TemRoutingModule,
    OnImgModule
  ],
  declarations: [
    ...COMPONENTS,
    ...COMPONENTS_NOROUNT
  ],
  entryComponents: COMPONENTS_NOROUNT
})
export class TemModule { }

b. HTML标签

<img alt="图片" [src]="showImgUrl+item.img" style="width: 130px;height: 130px;" errorImg />

showImgUrl为服务器地址，item.img为循环对象中的文件id或名称

errorImg 为第一步中自定义组件中的selector

 

参考

1. https://www.cnblogs.com/cong-bao/p/8521087.html