不要显示在 Angular 中找不到的图像答案

【问题标题】：Don't display an image that's not found in Angular不要显示在 Angular 中找不到的图像
【发布时间】：2018-02-12 12:28:08
【问题描述】：

我有一个加载一堆图片的轮播，但有可能是图片路径坏了，找不到图片。

如果是这种情况，它当前会导致添加一个空标签，这会添加一个空框并且它不应该存在。这是我的代码：

    <div class="gallery-img" gallerize>
      <ng-container *ngFor="let p of dynamicPaths">
          <img src="{{p}}">
      </ng-container>
    </div>

如果该路径没有图像，我如何防止添加图像标签？

【问题讨论】：

参考这个stackoverflow.com/questions/36026428/…
Angular2: Show placeholder image if img src is not valid的可能重复

标签： javascript angular typescript

【解决方案1】：

使用错误事件和隐藏的 html 数据绑定，您应该能够轻松实现这一点。

<img #myImage [hidden]="myImage.isBugged" (error)="myImage.isBugged = true" src="{{p}}">

【讨论】：

既然循环了好几条路径，不会破坏绑定吗？
不应该！
@SimeonNakov 如果它符合您的需要，请接受答案。

【解决方案2】：

感谢发现(error) 事件，我设法通过跟踪索引和拼接路径想出了一个简单的解决方案。这样一来，图像标签就不会被添加。

<div class="gallery-img" gallerize>
  <ng-container *ngFor="let p of dynamicPaths; let i = index">
      <img src="{{p}}" (error)="dynamicPaths.splice(i, 1)">
  </ng-container>
</div>

【讨论】：

【解决方案3】：

Angular 2 - 检查图片网址是否有效或损坏

另请参阅： Angular 2 - Check if image url is valid or broken

【讨论】：