Question

我有一个旋转木马可以加载一堆图像，但是图像路径可能会被破坏而且无法找到图像。

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

感谢发现(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>

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

3 个答案: