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 your system.config.js

Add to map

var map = {
    ...
    'ng2-img-fallback': 'node_modules/ng2-img-fallback'
}

and then to packages

var packages = {
    ...
    'ng2-img-fallback': { main: 'dist/index.js' }
}

Import directive to your component

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

@Component({
  selector: 'example-app',
  templateUrl: 'app.component.html',
  directives: [Ng2ImgFallback]
})
export class AppComponent {
  placeholder = 'http://placehold.it/200x200';
}

Use directive in html

<img src="some_img.png" src-fallback="{{ placeholder }}" >

See also example or demo page

License

MIT © Vadym Yatsyuk