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

If this ever happens you have lost your photo but there will always be a backup for you. We’ve added an additional feature that will increase your page load time up to 10x. Since we load the image after the page is loaded successfully, the angular application will run faster with this plugin.

Must Read: Angular 5+ Load Placeholder Image Fallback Component

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>

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.