javascript - 不要显示 Angular 中未找到的图像

Question

我有一个加载一堆图像的轮播，但图像路径可能已损坏并且无法找到图像。

如果是这种情况，它当前会导致添加一个空标签，这会添加一个空框，但它不应该在那里。这是我的代码:

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

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

Answer 1

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

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