如何删除空图像框？

Question

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

这是一个示例图片标记：

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

如何简单地删除这些空框架？

Answer 1

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

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

Answer 2

检查onerror事件，加载图像时如果加载失败则隐藏它：

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

Answer 3

在img标签上绑定error事件，例如

＆＃13;

＆＃13;

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

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

评论$(this).remove();并执行，您将获得＆＃34; Computerman＆＃34;作为alt属性指定的文本替代，也是控制台中的img元素。