Naked Panda Meditations

    ngx-img-fallback
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Angular 5+ Image Fallback

    downloads downloads downloads

    Load placeholder image on image error

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

    Demo page

    Demo page

    Stackblitz Example

    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

    Install

    npm i ngx-img-fallback

    DownloadsWeekly Downloads

    5,912

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    34.5 kB

    Total Files

    16

    Last publish

    Collaborators

    • vadimdez