nif

ng2-img-fallback

Angular2 directive for image fallback

Showing:

Popularity

Downloads/wk

24

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

0.6KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Deprecated!
This project has been renamed to ngx-img-fallback. Install using ngx-img-fallback instead.

Readme

Angular2 Image Fallback npm version Dependencies

Load placeholder image on image error

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

Demo page

Install

npm install  ng2-img-fallback --save

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 { Ng2ImgFallbackModule } from 'ng2-img-fallback';
 

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

ng2-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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100