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

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

Thanks!

听error图像元素的事件：

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

where updateUrl(event) { ... }赋予一个新值this.someUrl.

笨蛋的例子 https://plnkr.co/edit/2ztjpm?p=preview

如果您只想签入代码，您可以使用中解释的方法使用 javascript 检查图像是否存在 https://stackoverflow.com/questions/14651348/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;
  }
}

指令 Plunker 示例 https://plnkr.co/edit/ZOQirM?p=preview