我怎么不加载断开链接的图像？

Question

我正在开发一项功能，其中从服务器呈现图像。我正在研究对齐图像，但发现有很多空白区域。这是因为加载了链接断开的图像。

HTML：

<div class="image-result" *ngIf="Display('images')">
    <div class="col-sm-3" *ngFor="let item of items$|async">
      <a href="{{item.link}}">
          <figure>
             <img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
          </figure>       
      </a>
    </div>
</div>

我使用onerror="this.style.display='none'"来解决问题，但在从服务器加载图像时留下了很多空白区域。是否有任何解决方案可以在检测到链接断开的图像时删除img标记？在询问问题之前我已经完成了stackoverflow，但我无法解决这个问题。如果有人可以帮助我，那就太棒了。谢谢！ ：）

Answer 1

更有棱角的做法是：

 <img src="{{item.link}}" (error)="item.brokenImage=true">

所以你会：

<div class="col-sm-3" *ngFor="let item of items$|async">
    <div *ngIf="!item.brokenImage">
        <a href="{{item.link}}">
            <figure>
                <img class="res-img" [src]="item.link" (error)="item.brokenImage=true">
            </figure>
        </a>
    </div>
</div>

您需要侦听图像元素的错误事件，并为图像是否成功加载指定布尔值。然后，取决于该值，angular将显示带有div的图像，或者将其从DOM中删除。