Angular 5+ Image Fallback

Load placeholder image on image error

Angular 5+ directive that loads placeholder image on primary image error.

Demo

Demo page

or code demo

https://stackblitz.com/edit/ngx-img-fallback

Install

npm install  ngx-img-fallback --save 

For Angular 2+ use version 1.2.0

Usage

In case you're using SystemJS see configuration here

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 {}

Use it in you component

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'; } 

See also example or demo page

Events

(loaded)

ngx-img-fallback provides (loaded) event which is fired when either src or src-fallback is loaded. To determinate whether original source or fallback is loaded - add a param to your callback for the (loaded) event.

Example:

First add callback to your component

onLoaded(isFallback: boolean) {   // make somthing based on 'isFallback' }

and then bind it to the loaded event

<img src="picture1.png" src-fallback="picture2.png" (loaded)="onLoaded($event)"> 

License

MIT © Vadym Yatsyuk