如何仅使用CSS / HTML隐藏损坏的图像图标？

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

我有一个错误为src的图像：

<img src="Error.src"/>

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

CSS / HTML无法知道图像是否断开了链接，因此无论如何，您都将不得不使用JavaScript。

但是，这是隐藏图像或将源替换为备份的最小方法。

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

要么

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

更新资料

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

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的答案。您无法隐藏整个图像，但是可以更改残破图标的外观。

尽管人们在这里说了什么，但您根本不需要JavaScript，甚至不需要CSS！

实际上，仅使用HTML就是非常可行和简单的。 如果没有加载图片，您甚至可以显示默认图片。这是如何做...

这也适用于所有浏览器，甚至可以追溯到IE8（我在2015年9月托管的网站的250,000多名访问者中，零用户使用的东西比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">

如果您要添加带有文本alt =“ abc”的alt，它将显示显示损坏的缩略图，并显示alt消息abc

<img src="pic_trulli.jpg" alt="abc"/>

如果您不添加alt，它将显示显示损坏的缩略图

<img src="pic_trulli.jpg"/>

如果要隐藏损坏的内容，只需添加alt =“”，它将不会显示损坏的缩略图和任何alt消息（不使用js）

<img src="pic_trulli.jpg" alt=""/>

如果要隐藏损坏的内容，只需添加alt =“”＆onerror =“ this.style.display ='none'”，它将不会显示损坏的缩略图和任何alt消息（使用js）

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

第四个是有点危险（不完全是），如果您想在onerror事件中添加任何图像，即使Image作为style存在，它也不会显示。display就像添加。因此，在不需要显示其他图像时使用它。

display: 'none'; // in css

如果我们在CSS中提供它，则该项目将不会显示（如image，iframe，div这样）。

如果要显示图像，并且如果出现错误，则希望显示完全空白，则可以使用，但也要注意不要占用任何空间。因此，您需要将其保存在div中

链接https://jsfiddle.net/02d9yshw/

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

img {
    text-indent: -10000px
}

显然，如果您想查看“ alt”属性，则无法使用。

如果您想保留/需要将图像用作占位符，则可以将不透明性更改为0，并显示onerror和一些CSS来设置图像大小。这样，您将看不到断开的链接，但是页面将​​正常加载。

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

img {
    width: 75px;
    height: 100px;
}

我喜欢尼克的答案，并且一直在尝试这种解决方案。找到了一种更清洁的方法。由于:: before / :: after伪函数不适用于img和object之类的替换元素，因此它们仅在未加载对象数据（src）的情况下才起作用。它使HTML更加干净，并且仅在对象无法加载时才添加伪。

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

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

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

如果由于稍后要填充图像容器而仍需要使图像容器可见，并且不想麻烦显示和隐藏它，则可以在src内部粘贴一个1x1透明图像：

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

我将其用于此确切目的。我有一个图像容器，该图像容器将通过Ajax将图像加载到其中。由于图像很大，因此加载需要一些时间，因此需要在Gif加载栏的CSS中设置背景图像。

但是，由于的src为空，因此残破的图像图标仍会在使用它的浏览器中显示。

设置透明的1x1 Gif可以简单有效地解决此问题，而无需通过CSS或JavaScript添加任何代码。

仅使用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;

}

这是工作中的小提琴。

注意：我在小提琴的CSS中添加了边框，只是为了演示图像的位置。

使用对象标签。在标签之间添加替代文本，如下所示：

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp

自2005年以来，诸如Firefox之类的Mozilla浏览器一直支持:-moz-broken可以完全满足以下要求的非标准CSS伪类：

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

img[alt]::before也可以在Firefox 64中使用（尽管曾几何时img[alt]::after这是不可靠的）。我无法在Chrome 71中使用任何一种。

您可以按照以下路径作为CSS解决方案

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

丢失的图像要么什么都不显示，要么显示[？]样式框时找不到其来源。相反，您可能希望将其替换为您确定存在的“缺少图像”图形，以便获得更好的视觉反馈，说明出现了问题。或者，您可能希望将其完全隐藏。这是可能的，因为浏览器找不到的图像会触发我们可以观看的“错误” JavaScript事件。

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

另外，您可能希望触发某种Ajax操作，以在发生这种情况时向站点管理员发送电子邮件。

诀窍img::after是好东西，但至少有两个缺点：

1. 并非所有浏览器都支持（例如，不适用于Edge https://codepen.io/dsheiko/pen/VgYErm）
2. 您不能简单地隐藏图像，而是将其覆盖-因此，当您要显示默认图像时，这无济于事

我不知道没有JavaScript的通用解决方案，但是对于Firefox，只有一个不错的解决方案：

img:-moz-broken{
  opacity: 0;
}

无需任何代码即可完成此操作的基本且非常简单的方法是仅提供一个空的alt语句。然后浏览器将图像返回为空白。看起来好像图像不存在。

例：

<img class="img_gal" alt="" src="awesome.jpg">

试试看！ ;)

对于未来的Google员工，2016年提供了一种浏览器安全的纯CSS方法，可使用属性选择器隐藏空白图片：

img[src="Error.src"] {
    display: none;
}

编辑：我回来了-对于未来的谷歌用户来说，2019年有一种方法可以在Shadow Dom中设置实际的替代文本和替代文本图像的样式，但仅在开发人员工具中有效。所以你不能使用它。抱歉。那就太好了。

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}