如何隐藏图像破碎图标只使用 CSS/HTML(不带 js)

问题描述

如何隐藏破碎的图像图标？例：

我有一个错误 src 的图像：

<img src="Error.src"/>

该解决方案必须适用于所有浏览器。

只使用 CSS 或 HTML，而不是 JS 。

最佳解决方案

CSS /HTML 无法知道图像是否断开链接，所以您将不得不使用 JavaScript

但是这里是隐藏图像或用备份替换源的最小方法。

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

要么

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

Update

您可以通过执行以下操作一次将此逻辑应用于多个图像：



document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});
<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

更新 2

对于 CSS 选项，请参阅下面的 michalzuber’s answer 。您无法隐藏整个图像，但您可以更改破损图标的外观。

次佳解决方案

尽管人们在说这里，你根本不需要 JavaScript，甚至不需要 CSS！

它实际上是非常可行和简单的仅 HTML 。如果图像未加载，您甚至可以显示默认图像。就是这样…

这也适用于所有浏览器，甚至远远超过 IE8(在 2015 年 9 月份托管的网站的 25 万以上的访问者中，ZERO 人使用的东西比 IE8 差，意味着此解决方案适用于所有内容) 。

步骤 1：将图像引用为对象而不是 img 。当对象失败时，它们不会显示破损的图标; 他们什么都不做。从 IE8 开始，可以互换使用 Object 和 Img 标签。你可以调整大小并做所有光荣的东西，你可以与常规的图像。不要怕对象标签; 它只是一个标签，没有什么大和笨重的加载，它不会减慢任何东西。您只需使用另一个名称的 img 标签。速度测试显示它们的使用相同。

步骤 2 :(可选，但很棒) 在该对象内粘贴默认图像。如果要在对象中实际加载的图像，则默认图像将不显示。所以例如，您可以显示一个用户头像的列表，如果有人在服务器上没有图像，它可以显示占位符图像… 根本不需要 JavaScript 或 CSS，但是您获得了什么的功能需要大多数人的 JavaScript 。

这是代码…

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

是的，很简单

如果你想用 CSS 实现默认图像，你可以使它更简单的 HTML 像这样…

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

… 而且只需从这个答案中添加 CSS – > https://stackoverflow.com/a/32928240/3196360

第三种解决方案

在 https://bitsofco.de/styling-broken-images/找到了一个很好的解决方案



img {
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;
  text-align: center;
  content: attr(alt);
}
<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

第四种方案

仅使用 CSS 很困难，但您可以使用 CSS 的 background-image 而不是<img> 标签…

这样的事情

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

这是一个工作小提琴：http://jsfiddle.net/xbK6g/

注意：我在框中的 CSS 中添加了边框，以显示图像的位置。

第五种方案

我喜欢 Nick 的 answer，并且正在玩这个解决方案。找到一个更干净的方法。因为:: before /:: 之后的 pseudoos 不能在替换元素 (如 img 和 object) 上工作，所以它们只有在没有加载对象数据 (src) 的情况下才会工作。它保持 HTML 更干净，只有在对象无法加载时才添加伪。

http://codepen.io/anon/pen/xwqJKQ

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: red url('http://placehold.it/200x200');
  }
}

第六种方案

我认为最简单的方法是隐藏 text-indent 属性破损的图像图标。

img {
    text-indent: -10000px
}

如果您想要查看”alt” 属性，那么它是不行的。

第七种方案

如果您仍然需要使图像容器可见，因为它稍后会被填写，并且不想打扰显示和隐藏它，您可以在 src 中粘贴 1×1 透明图像：

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

我用这个确切的目的。我有一个图像容器，它将通过 Ajax 加载图像。因为图像很大，需要加载，所以需要在 Gif 加载栏的 CSS 中设置一个 background-image 。

然而，因为 src 是空的，故障图像图标仍然出现在使用它的浏览器中。

设置透明 1×1 Gif 可以简单有效地修复此问题，无需通过 CSS 或 JavaScript 添加代码。

参考文献

How to hide image broken Icon using only CSS/HTML (without js)

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何隐藏图像破碎图标只使用 CSS/HTML(不带 js)