Angular 10 - 检测图像是否仅存在于客户端，否则默认图像答案

【问题标题】：Angular 10 - detect if image exists on client side only, else default imageAngular 10 - 检测图像是否仅存在于客户端，否则默认图像
【发布时间】：2020-08-03 10:10:11
【问题描述】：

我需要知道如何使用 Angular 仅在客户端检测图像是否存在。听说可以用超时功能设置默认图片，但是不知道怎么捕捉404错误。

我只需要在 getResourceImg() 上编写代码，就像 angular's style guide says

resource-ui.component.ts

  @Input() resource: IResourcePublished;
  // ...

  resourceImgUrlLogoDefault: string = 'assets/images/logo_default.png';
  resourceImgUrl: string;

  constructor(private modalService: NgbModal) {}

  ngOnInit(): void {
    this.resourceImgUrl = this.getRessourceImg(this.resource);
  }

  getResourceImg(resource: IResourcePublished): string {

    return 'assets/images/screen-resources/' + resource.id + '.png';
  }

  //..

这是模板（使用*ngFor="let resource of resources" 生成）：

resource-ui.component.html

<div class="card" [style.background]="categoryColor">
  <div class="card-header" ngbTooltip="More infos" (click)="openResourceDetails()">
    <img
    class="layout-img img-fluid"
    [src]="resourceImgUrl"
    alt="resource-{{resource.id}}"
    />
  </div>
  <!-- ... --> 
</div>

【问题讨论】：

你可以使用return resource.id ? 'assets/images/screen-resources/' + resource.id + '.png': resourceImgUrlLogoDefault
@KamranKhatti 并不是因为 id 本身（从其余 api 获取）始终存在。在这种情况下，我需要验证的是 本地图像。例如：“assets/images/screen-ressources/192.png”不存在，但“assets/images/screen-ressources/47.png”存在于我的文件夹中。实际上，它就像是本地资产图片文件夹与资源 id 通过 API 的映射。

标签： angular image rest url

【解决方案1】：

您可以创建可重复使用的指令，例如：

fallback-img.directive.ts

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

@Directive({
  selector: 'img[fallback]'
})
export class FallbackImgDirective {
  @Input()
  @HostBinding('src')
  src: string;

  @Input() fallback: string;

  @HostListener('error')
  onError() {
    this.src = this.fallback;
  }
}

用法

<img src="http://unknown/404.jpg" fallback="https://via.placeholder.com/150" alt="">

Ng-run Example

【讨论】：

谢谢，真的很有帮助！现在，@HostListener('error') onError() {} 如何处理 src 属性？我不太了解@HostBinding('src')，因为直到知道我才使用指令。
HostListener 允许我们监听宿主元素的事件。在这种情况下，主机元素是 img，它可能有错误事件。 HostBinding 意味着该 src 字段的更改将更新宿主元素的 src 属性