Angular 5+ Image Fallback

Load placeholder image on image error

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

Demo page

Demo page

Stackblitz Example

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

Changelog

3.0.0

• [#99] - Update project to Angular 17
• [#96] - Upgrade project to angular 16

2.0.0

• [#83] - Upgrade project to angular 13
• [#84] - Upgrade to angular 13

1.3.4

• [#27] - Upgrade Angular to version 8

1.3.3

• [#25] - loaded event does not fire on fallback
• [#26] - onLoad to be called when the fallback image is used

1.3.2

Updated packagr

1.3.1

• [#24] - Error: Please add a @NgModule annotation in 1.3.0

1.3.0

• [#23] - Restructure

Breaking change

Distribute now generates different files. Use bundles/ngx-img-fallback.umd.js or its minified version bundles/ngx-img-fallback.umd.min.js.

1.2.0

• [19] - Support server side rendering

1.1.3

• [18] - Wrong contents for 1.1.2 in npm

1.1.2

• [#13] - Fallback image not loaded when the dynamic image source changed

1.1.0

• Generate UMD bundle

Breaking changes

This breaking change only valid for SYSTEMJS approach,

Now you have to do this in you system.config.js file:

Replace in your packages

var packages = {
    ...
    'ngx-img-fallback': { main: 'dist/bundles/ngx-img-fallback.umd.js' }
}

1.0.0

• [#15] - Rename project

0.2.3

• [#14] - Angular 4

0.2.2

• [#11] - Added (loaded) event

0.2.1

• [#10] - Error Ionic2 run android device

Breaking changes

Now instead of declaring Ng2ImgFallbackModule you need to import it:

@NgModule({
  imports: [BrowserModule, Ng2ImgFallbackModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

0.2.0

• [#10] - Error Ionic2 run android device

Breaking changes

Now instead of declaring Ng2ImgFallback you need to import it:

@NgModule({
  imports: [BrowserModule, Ng2ImgFallback],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

0.1.4

• [#8] - Fixed typings (Can't find main.d.ts file)

0.1.3

• [#6] - Update to Angular RC6
• [#7] - Update how-to to Angular RC6
• Removed version lock from peer dependency

0.1.2

• [#3] - Update peer dependency
• [#4] - Update to angular2.0.0-rc.5