我如何隐藏破碎的图像图标? 例子:

我有一个图像与错误src:

<img src="Error.src"/>

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


当前回答

可以使用before和after作为样式,以防止图像损坏。

<img src="Error.src">

img:before {
  content: url("image.jpg");
}

img:after {
  content: "(url: " attr(src) ")";
}

在这种情况下,如果src中的图像被破坏了,它将使用之前的内容,如果没有错误,它将使用src。

其他回答

我喜欢尼克的答案,并一直在研究这个解决方案。找到了一个更干净的方法。由于::before/::after伪元素不能用于替换的元素,如img和object,它们只在对象数据(src)未加载时才会工作。它使HTML更加清晰,并且只在对象加载失败时才添加pseudo。

对象{ 位置:相对; 浮:左; 显示:块; 宽度:200 px; 身高:200 px; margin-right: 20 px; 边框:1px纯黑色; } 对象::{后 位置:绝对的; 上图:0; 左:0; 显示:块; 宽度:100%; 高度:100%; 内容:”; 背景:红色url(“http://placehold.it/200x200”); } <object data="http://lorempixel.com/200/200/people/1" type="image/png"></object> . <对象数据= " http://broken。img / url " type = " / png图像“> < /对象>

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

img {
    text-indent: -10000px
}

显然,如果你想看到“alt”属性,它就不起作用了。

缺失的图像要么什么都不显示,要么显示一个[?]样式框,当无法找到它们的源时。相反,你可能想用一个你确定存在的“缺失的图像”图形来替换它,这样就有更好的视觉反馈,表明有问题。或者,你可能想把它完全隐藏起来。这是可能的,因为浏览器无法找到的图像会触发我们可以观察的“错误”JavaScript事件。

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

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

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

在理论:

严格的“css only”,我们没有干净的选择。看到其他答案,我没什么可补充的。

在实践中:

我认为在错误事件上添加一个类是最好的方法。这就是我的意思-有答案几乎是这样的,原则是一样的,只是如果你不直接添加样式声明会更优雅。相反,添加一个以后可以针对的类:

   <img src="..." onerror="this.classList.add('notfound')">

现在你可以使用img对它进行样式化。没有找到作为选择器。你可以养成一个习惯,把这个小片段添加到你所有的图像中;在你做好造型之前不会有任何伤害。


旁注,在有人评论“这不是一个css唯一的解决方案”之前:是的,谢谢你,队长,确实不是。我试图帮助解决问题本身,一个很多人可能会遇到的问题,而不仅仅是看确切的措辞。

如果你将添加alt与文本alt="abc",它将显示显示腐败缩略图,和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作为样式存在,它也不会显示。显示就像加法。因此,当您不需要任何替代图像显示时使用它。

display: 'none'; // in css

如果我们在CSS中给出它,那么项目将不会显示(像image, iframe, div之类的)。

如果你想显示图像&你想显示完全空白,如果错误,那么你可以使用,但也要小心,这不会占用任何空间。所以,你需要把它保存在一个div中

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