Angular2：如果 img src 无效，则显示占位符图像

Question

目标：加载带有动态源的图像。如果未找到图像，则改为加载占位符图像。

这应该证明我正在尝试做什么，但我不知道如何有条件地设置 validImage 基于第一个 img src 是否有效

<img *ngif="validImage" class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg" alt="...">
<img *ngif="!validImage" class="thumbnail-image" src="./app/assets/images/placeholder.jpg" alt="...">

validImage 应该是 true 如果 src="./app/assets/images/{{image.ID}}.jpg" 返回图像。否则它会返回 false 并且只有第二个 img 标签应该显示。

有明显的变通办法，比如存储所有有效图像源的列表，但我认为有更好的方法来实现这一点。

对于在 Angular2 中实现这一点的最佳方式的任何建议，我们将不胜感激。

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

Answer 1

处理损坏的图像链接的最佳方法是对 <img> 标签使用 onError 事件：

 <img  class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg"
      onerror="this.src='./app/assets/images/placeholder.jpg';"  alt="..." />

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

Answer 2

<img [src]="pic" (error)="setDefaultPic()">

在你的组件类中的某个地方：

 setDefaultPic() {
  this.pic = "assets/images/my-image.png";
}

原文由 Tiago Bértolo 发布，翻译遵循 CC BY-SA 3.0 许可协议