Press "Enter" to skip to content

Angular 5+ Load Placeholder Image Fallback Component

Angular 5+ Image Fallback component that loads the placeholder image on the base image error.

angular fallback image, angular img onerror, ngx progressbar, ngx progressbar github, broken image

How to make use of it:

Install:

npm install  ngx-img-fallback --save

1. 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 {}

2. Use it in your component.

import { Component } from '@angular/core';

@Component({
  selector: 'example-app',
  template: '<img src="some_img.png" src-fallback="{{ placeholder }}">'
})
export class AppComponent {
  placeholder = '/placehold/200x200';
}

angular 5+ image fallback component Plugin/Github


See Demo And Download

Official Website(VadimDez): Click Here

This superior jQuery/javascript plugin is developed by VadimDez. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.