javascript - 我应该如何不加载链接损坏的图像？

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

而不是 onerror="this.style.display='none'"要隐藏图像，您可以使用 onerror="this.parentNode.removeChild(this)"完全删除图像标签。

<小时/>

如果您想删除整个列，根据您的具体情况，您可以执行以下操作。

var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);

或者，在 HTML 中:

onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"

您可能应该将其移动到某个 JavaScript 函数并通过说附加您的处理程序

element.addEventListener('error', function() { /* ... */ });

引用文献: parentNode , removeChild , addEventListener .

<小时/>

如果您不关心支持 Internet Explorer，也可以使用 remove 而不是执行parentNode.removeChild诡计。这对于减少 onerror 中的代码长度特别有用。属性，您会选择使用它，但我不建议这样做。