ng2-img-fallback

Angular2 Image Fallback

Load placeholder image on image error

Angular 2 directive that loads placeholder image on primary image error.

Demo page

Install

NPM:

npm install  ng2-img-fallback --save

or Bower:

bower install ng2-img-fallback --save

Usage

In case you're using SystemJS see configuration here

Add directive to your module's declarations

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

@NgModule({
  imports: [BrowserModule, Ng2ImgFallback],
  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

License

MIT © Vadym Yatsyuk

Changelog

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]
})