Angular 5+ Image Fallback component that loads the placeholder image on the base image error.

angular fallback image, angular img onerror, ngx progressbar, ngx progressbar github, broken image

How to make use of it:

Install:

npm install  ngx-img-fallback --save

1. Add module to your module’s 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 {}

2. Use it in your component.

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

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

angular 5+ image fallback component Plugin/Github

See Demo And Download

Official Website(VadimDez): Click Here

This superior jQuery/javascript plugin is developed by VadimDez. For extra advanced usage, please go to the official website.