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],
  declarations: [AppComponent, Ng2ImgFallback],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use it in you component

import { Component } from '@angular/core';
import { Ng2ImgFallback } from 'ng2-img-fallback';

@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.1.3

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