在 Angular 中为图片标签添加 404 后备答案

【问题标题】：Adding a 404 fallback for picture Tags in Angular在 Angular 中为图片标签添加 404 后备
【发布时间】：2021-05-30 18:05:06
【问题描述】：

我们在 Angular 9 应用程序中大量使用了HTML5 picture Tag。我们现在想在实际 src 返回 404 时显示备用图像。

我创建了一个替换 img src 的指令，例如 this answer 建议：

@Directive({
  selector: '[fallbackSrc]',
})
export class FallbackImageDirective {
  constructor(
    @Attribute('fallbackSrc') public fallbackSrc: string,
    private renderer: Renderer2,
    private el: ElementRef
  ) {}

  @HostListener('error') onError() {
    this.renderer.setAttribute(this.el.nativeElement, 'src', this.fallbackSrc);
  }
}

在图片标签中工作：

<picture>
  <source
    *ngIf="_teaser.images.i377_212_webp"
    [srcset]="_teaser.images.i377_212_webp"
    type="image/webp"
  />
  <img
    loading="lazy"
    [alt]="_teaser.image_alt"
    [src]="_teaser.images.i377_212"
    fallbackSrc="/ng-assets/images/backgrounds/teaser_fallback_image.png"
    class="preview-image"
  />
</picture>

但是，当我打开应用程序时，对 wepP-Image 的请求一遍又一遍。我怀疑浏览器注意到<img src= 的变化并再次开始评估<source> 标签，然后失败并再次调用onError()，导致无限循环。

我也尝试过this solution，但它什么也没做（可能是因为它适用于较旧的 Angular 版本）。

我可以做些什么来阻止浏览器再次评估 source 标签？

【问题讨论】：

标签： javascript html angular image angular-directive

【解决方案1】：

我通过删除 onError 方法中的 source 标签使其工作：

@HostListener('error') onError() {
  const parentNode = this.el.nativeElement.parentNode;

  if (parentNode.tagName.toLowerCase() === 'picture') {
    for (let child of parentNode.children) {
      if (child.tagName.toLowerCase() === 'source') {
        parentNode.removeChild(child);
      }
    }
  }

  this.renderer.setAttribute(this.el.nativeElement, 'src', this.fallbackSrc);
}

【讨论】：