next() Packaged Middleware
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

ngx-img-fallback

1.3.3 • Public • Published

Angular 5+ Image Fallback

https://www.npmjs.com/package/ng2-img-fallback https://www.npmjs.com/package/ngx-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 page

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(isFallbackboolean) {
  // 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

install

npm i ngx-img-fallback

Downloadsweekly downloads

852

version

1.3.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability