ngx-broken-img

Angular directive to fix broken url in img.
If image url returns 404 a placeholder is used to fill img's src.

Demo

https://stackblitz.com/edit/ngx-broken-img

Install

npm

npm install ngx-broken-img --save

yarn

yarn add ngx-broken-img

Setup

step 1: add NgxBrokenImgModule to app NgModule

import { CommonModule } from '@angular/common';
import { NgxBrokenImgModule } from 'ngx-broken-img';

@NgModule({
  imports: [
    CommonModule,
    NgxBrokenImgModule,
  ],
  bootstrap: [App],
  declarations: [App],
})
class MainModule {}

Use

<!-- Default placeholder -->
<img src="http://somebrokenurl" ngxBrokenImage>

<!-- Custom base64 placeholder -->
<img src="http://somebrokenurl" ngxBrokenImage="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM88x8AAp0BzdNtlUkAAAAASUVORK5CYII=">