Угловая директива: отступление для webp с изображением по умолчанию

Question

Я ищу директиву, в которой 1-й тег img пытается загрузить .webp image , и откат должен составлять .jpg image , и если оба изображения завершаются неудачно, то это должно произойтипоказать изображение по умолчанию src / assets / default.jpeg

Это должно быть примерно так:

<img [src]="webpSrc" [fallback]="jpegSrc" [default]="defaultImg"/>

Вот мой код для установки изображения по умолчанию

import {Directive, Input, HostBinding} from '@angular/core'
@Directive({
    selector: 'img[default]',
    host: {
      '(error)':'updateUrl()',
      '(load)': 'load()',
      '[src]':'src'
     }
  })

 export class ImagePreloadDirective {
    @Input() src:string;
    @Input() default:string;
    @HostBinding('class') className

    updateUrl() {
      this.src = this.default;
    }
    load(){
      this.className = 'image-loaded';
    }
  }