Angular 5+加载占位符图像组件 - ngx-img-fallback

Angular 5+加载占位符图像组件 - ngx-img-fallback
插件名称 ngx-img-fallback
发布时间 2020年6月17日
插件作者 VadimDez

Angular 5+ Image Fallback组件,可在主图像错误时加载占位符图像。

安装:

# NPM
$ npm install ngx-img-fallback --save

用法

如果您正在使用,SystemJS

将模块添加到模块的 imports

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';
 
import { ImgFallbackModule } from 'ngx-img-fallback';
 

@NgModule({
  imports: [
    BrowserModule, 
    ImgFallbackModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

在组件中使用它

import { Component } from '@angular/core';

@Component({
  selector: 'example-app',
  template: '<img src="some_img.png" src-fallback="{{ placeholder }}">'
})
export class AppComponent {
  placeholder = 'http://placehold.it/200x200';
}