javascript - Angular 2 - 检查图像 url 是否有效或损坏

Question

我正在从 API 获取大量图像 URL，并将它们显示在 Angular 2 Web 应用程序中。一些 URL 已损坏，我想用存储在本地网络服务器上的默认图片替换它们。有没有人建议如何测试 url 以及在状态代码 404 的情况下替换损坏的图像？

谢谢!

Answer 1

监听图片元素的error事件:

<img [src]="someUrl" (error)="updateUrl($event)">

其中 updateUrl(event) { ... } 将新值分配给 this.someUrl。

Plunker example

如果您只想 checkin 代码，您可以使用 Checking if image does exists using javascript 中说明的方法

@Directive({
  selector: 'img[default]',
  host: {
    '(error)':'updateUrl()',
    '[src]':'src'
   }
})
class DefaultImage {
  @Input() src:string;
  @Input() default:string;

  updateUrl() {
    this.src = this.default;
  }
}

Directive Plunker example