image-fallback.directive.ts

import {Directive, Input, HostListener} from '@angular/core';

@Directive({
  selector: 'img[fallback]'
})
export class ImageFallbackDirective {
  private _fallback = 'assets/images/404_image.png';

  @Input() set fallback(value: string) {
    if (value && value.length > 0) {
      this._fallback = value;
    }
  }

  @HostListener('error', ['$event']) onError(event: Event) {
    const target = event.target as HTMLImageElement;
    // avoid calling onerror if fallback image fails
    if (target.dataset.fallback != this._fallback) {
      target.src = target.dataset.fallback = this._fallback;
    }
  }

  constructor() {}
}