Angular directive to fix broken url in img.
If image url returns 404 a placeholder is used to fill img's src.
https://stackblitz.com/edit/ngx-broken-img
npm install ngx-broken-img --saveyarn add ngx-broken-imgstep 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 {}<!-- Default placeholder -->
<img src="http://somebrokenurl" ngxBrokenImage>
<!-- Custom base64 placeholder -->
<img src="http://somebrokenurl" ngxBrokenImage="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mM88x8AAp0BzdNtlUkAAAAASUVORK5CYII=">