ngx-img-fallback
Angular5+ directive for image fallback
Last updated a year ago by vadimdez .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ngx-img-fallback 
SYNC missed versions from official npm registry.

Angular 5+ Image Fallback

https://www.npmjs.com/package/ngx-img-fallback https://www.npmjs.com/package/ng2-img-fallback npm version Dependencies https://www.paypal.me/vadimdez

Load placeholder image on image error

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

Demo

Demo page

or code demo

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

Current Tags

  • 1.3.4                                ...           latest (a year ago)

11 Versions

  • 1.3.4                                ...           a year ago
  • 1.3.3                                ...           3 years ago
  • 1.3.2                                ...           3 years ago
  • 1.3.1                                ...           3 years ago
  • 1.3.0                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.3                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 0
Last Month 1
Dependencies (1)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |