Fallback Image If Main Image Fails And Add Loader | ngx-images

ngx-images component allows you to define a fallback/backup image if the main image fails, and add a loader.

image fallback angular, html fallback image, fallback image react, nextimage fallback, background image fallback, ngx hide broken image

How to make use of it:

Installation:

npm install ngx-images --save

1. Then in your app.component.ts code

import { NgxImagesService, ImageConfig } from 'ngx-images';
localConfig:  ImageConfig  = { imageFallbackPath:  ' ',
    addLoader:  true,
    loader:  'rotating-plane',
    pageLoadBoost:  true
};

constructor(public  imgHelper:  NgxImagesService) {}    

ngOnInit() {
        this.imgHelper.setGlobal({ imageFallbackPath:  ' ',    
        addLoader:  true,    
        loader:  'rotating-plane',    
        pageLoadBoost:  true    
    });    
}

2. Then in-app.component.scss the code

@import  '~ngx-images/loader';

3. Then in your code app.component.html

<strong>This doesn't look good</strong>
<img src="i_am_not_here.jpg">

<strong>Replace below image with your logo</strong>
<span> <- At least one parent of image with single child is important
    <img src='asfd.jpg' ngxImages>
</span>

Custom Fallback Image For Broken, ngx-images Plugin/Github


See Demo And Download

Official Website(iqge): Click Here

This superior jQuery/javascript plugin is developed by iqge. For extra Advanced Usage, please go to the official website.

Share