如何删除空图像帧？答案

【问题标题】：How can I remove empty image frames?如何删除空图像帧？
【发布时间】：2017-12-12 11:52:58
【问题描述】：

在我的网站上，当加载资源因不存在而失败时，我有这样的空图像帧：

这是一个示例图像标签：

<img class="thumbnail" src="{{event.venue.icon}}" id="thumbnail">

我怎样才能简单地删除这些空框架？

【问题讨论】：

如何显示图像？带有标签？
对每个图像使用 onload javascript 事件处理程序，如果出现状态错误隐藏该图像
这可能会有所帮助：stackoverflow.com/questions/980855/…
看起来 Angular 正在将图像源绑定到“未找到”图像。 event.venue.icon 值的来源是你需要看的地方。
好吧，我也有它查看不同的来源（外部api），因此基本上会出现此错误，因为我将图标映射到对象的方式不同。我只想在前端快速删除空框。

标签： javascript jquery html css angularjs

【解决方案1】：

绑定到图像的错误事件，并且在该方法中，您可以删除任何无法加载的图像的容器。这是一个示例，但如果您想要更具体的内容，请发布您的代码：

$('.yourImageSelector').error(function() {
    $(this).parent().remove();
});

【讨论】：

【解决方案2】：

查看onerror事件，加载图片时如果加载失败则隐藏：

<img src="someimage.jpg" onerror="this.style.display='none';" />

【讨论】：

【解决方案3】：

像这样在img标签上绑定error事件，

$(document).ready(function(){
  $('#myImg').on("error", function() {
    $(this).remove();  // Execute with commenting this line and see the result
    console.log(document.querySelector('img'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="myImg" src="compman.gif" alt="Computerman" width="107" height="98">

注释$(this).remove(); 并执行，您将获得“Computerman”作为alt 属性指定的替代文本以及控制台中的img 元素作为结果。

【讨论】：

这似乎没有任何改变。我已将它放在 html 中的
那个框（从图片中）是img标签的父级吗？
这是实际的 img 标签本身。就是这样：
在触发error 事件时检查我更新的答案，它正在删除img 元素。控制台会给出null作为查询文档中img标签的结果。
控制台似乎没有打印任何内容