找不到 src 源图像时如何静默隐藏“找不到图像”图标答案

【问题标题】：How to silently hide "Image not found" icon when src source image is not found找不到 src 源图像时如何静默隐藏“找不到图像”图标
【发布时间】：2011-03-15 05:39:24
【问题描述】：

您知道如何在找不到图像文件时从呈现的 HTML 页面中隐藏经典的“找不到图像”图标吗？

任何使用 JavaScript/jQuery/CSS 的工作方法？

【问题讨论】：

Andy 的回复是正确的，但是，您可能想改用 style.vsibility。如果您设置了可见性，该元素仍会在您的文档上保留其空间，因此不会发生有趣的文档移动。
我不明白这一点。您只是不应该尝试从您的 html 代码中获取任何现有资源。使用 javascript 隐藏不良交易资源对我来说似乎是一个丑陋的解决方案。
@Kaaviar 你没抓住重点。Stack Overflow 上的很多热链接图片都被破坏了，因为图片在发布时可用，但几个月后不可用。这些图像被悄悄地、轻轻地隐藏起来。
@systempuntoout：我不确定为什么两者会被区别对待。 I tested a broken image 在 Firefox 和 Chrome 中，它不会在 Firefox 中显示，但在 Chrome 中显示为损坏。很明显，这是 Firefox 自己决定的，因为似乎没有任何样式会影响它。顺便说一句，StackPrinter 做得很好。
@systempuntoout：我发现了更多关于 Firefox 如何使用它的信息。查看updated fiddle 和[专有伪类，:-moz-broken](developer.mozilla.org/en/CSS/:-moz-broken)。之前我只是在想，伪类对于设置损坏图像的样式很有用。

标签： javascript jquery html css image

【解决方案1】：

您可以使用 JavaScript 中的onerror 事件在图像加载失败时采取行动：

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

在 jQuery 中（因为你问过）：

$("#myImg").error(function () { 
    $(this).hide(); 
});

或者对于所有图片：

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

如果隐藏图像可能会改变布局，您应该使用visibility: hidden 而不是.hide()。网络上的许多网站都使用默认的“无图像”图像，当指定的图像位置不可用时，将src 属性指向该图像。

【讨论】：

andy - 适用于所有图像的“全局”解决方案是什么？我想如果它们都在同一个 div 中就很容易了——只是想知道文档中的所有图像......
@jAndy：我很确定它是，但你的评论让我仔细检查。一个快速的谷歌返回了这个w3schools page（对不起，大卫，如果你正在阅读这个）表明跨浏览器支持。
@jim：如果您使用的是 jQuery，您可以将事件应用于所有图像。只需使用标签选择器，例如$("img").error(function () { /*...*/ });.
@Andy E：听起来不错，+1。下一个有趣的问题是，“error”是否可以与live() 或delegate() 绑定。
visibility 会更好，因为display 会破坏布局。

【解决方案2】：

快速研究Andy E的答案，不可能live()绑定error。

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

所以你必须去喜欢

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

在创建新元素时直接绑定error event handler。

【讨论】：

+1，原因是 onerror DOM 事件没有冒泡。 live 和 delegate 通过将事件处理程序放置在 DOM 层次结构的更上方并在事件冒泡时捕获事件来工作。当然，jQuery 开发人员已经针对 focus 和 blur 等事件解决了这个问题
@Andy E：是的，他们已经解决了这个问题，为error 做类似的事情可能不是最糟糕的想法。对我来说听起来像是nice to have。

【解决方案3】：

<img onerror='this.style.display = "none"'>

【讨论】：

不幸的是，我无法使用此解决方案，因为 html 内容是通过 Json 从第三方网站下载的，我无法对其进行编辑。无论如何，谢谢。
太棒了，正是我需要的。简单不碍事，适合模板！
虽然已经很老了，但这很棒！有没有办法隐藏我现在隐藏的图像周围的标签？

【解决方案4】：

要隐藏每个图像错误，只需在页面底部添加此 JavaScript（就在结束正文标记之前）：

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

【讨论】：

这是我的首选方法，因为它几乎可以确保在图像出错之前绑定 onerror 事件，并且您不必为每个图像标签添加 onerror 属性。请务必将此代码放在所有图像标签之后，但在中的任何其他 javascript 之前，否则阻塞的外部 JS 加载可能会导致图像错误后执行。
这个对我有用，加上加拉太书的建议，需要在任何可能延迟它的事情之前执行这个 JS。
这回答了原始问题，但这是一个单向过程。要使随后加载的图像再次可见，请添加一个 onload 事件。 allimgs[i].onload = function() { this.style.visibility = "visible"; };

【解决方案5】：

现在回答可能有点晚，但这是我的尝试。当我遇到同样的问题时，我通过使用图像大小的 div 并将背景图像设置为此 div 来修复它。如果找不到图像，则 div 将呈现为透明的，因此所有这些都在没有 java 脚本代码的情况下静默完成。

【讨论】：

【解决方案6】：

我找到了一个很好的方法来做到这一点，同时在 Angular.js 中使用 ng-src 指令时仍然可以正常工作......

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

它基本上是一个最短的透明 GIF（如图所示） http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html)

当然，这个 gif 可以保存在某个全局变量中，这样就不会弄乱模板。

<script>
  window.fallbackGif = "..."
</script>

并使用

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

等等

【讨论】：

【解决方案7】：

我稍微修改了 Gary Willoughby 建议的解决方案，因为它简要地显示了损坏的图像图标。我的解决方案：

    <img src="..." style="display: none" onload="this.style.display=''">

在我的解决方案中，图像最初是隐藏的，只有在成功加载后才会显示。它有一个缺点：用户不会看到半载的图像。如果用户禁用了 JS，那么他们将永远看不到任何图像

【讨论】：

...如果禁用 javascript，用户将看不到任何内容！
@yckart 好吧，如果用户禁用了 javascript，那么大多数有用的 Web 应用程序无论如何都无法运行......
<img src="..." onerror="this.style.display = 'none'"/> 可能更适合半载和非 js 浏览器的情况？

【解决方案8】：

只需使用简单的 css

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}

【讨论】：

【解决方案9】：

只需在您的<img> 上添加空白alt 属性

类似这样的：<img src="..." alt="">

【讨论】：