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

Question

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

谢谢！

原文由 Jakob Svenningsson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

监听图像元素的 error 事件：

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

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

例子

如果您只想签入代码，您可以使用 使用 javascript 检查图像是否存在中 解释的方法

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

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

指令 Plunker 示例

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 onError 事件以这种方式处理 invalid url 或 broken url 。

• https://plnkr.co/edit/fD8zxd?p=preview

 <img [src]="invalidPath" onError="this.src='images/angular.png'"/>

这样你就可以直接将 img 路径分配给带有 onError 事件的 src

原文由 micronyks 发布，翻译遵循 CC BY-SA 3.0 许可协议