如何使用CSS/HTML(不带js)隐藏图像损坏的图标

Question

如何隐藏损坏的图像图标？ 示例:

我有一个错误src的图像:

<img src="Error.src"/>

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

仅使用CSS或HTML,而不是JS.

Answer 1

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的答案.您无法隐藏整个图像,但可以更改损坏的图标的外观.

Answer 2

尽管人们在这里说的是,你根本不需要JavaScript,你甚至不需要CSS!

它实际上非常简单,仅使用HTML. 如果图像未加载,您甚至可以显示默认图像.这是如何做...

这也适用于所有浏览器,甚至可以追溯到IE8(2015年9月我托管的网站中有250,000多名访客,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 - > /sf/answers/2304976831/

Answer 3

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

Answer 4

如果您要添加带有文本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/

Answer 5

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

img {
    text-indent: -10000px
}

显然,如果你想看到"alt"属性它不起作用.

Answer 6

我很喜欢这个答案由尼克,并用此溶液玩弄.找到一种更干净的方法 因为::之前/ ::之后的伪是对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;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

Answer 7

如果你想保持/需要图像作为占位符,你可以使用onerror和一些css将不透明度更改为0以设置图像大小.这样您就不会看到断开的链接,但页面正常加载.

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

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

Answer 8

仅使用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中添加了边框,只是为了演示图像的位置.

Answer 9

如果您需要仍然可以看到图像容器,因为它稍后会被填充,并且不想打扰显示和隐藏它,您可以在src中粘贴1x1透明图像:

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

我将此用于此目的.我有一个图像容器,它将通过Ajax将图像加载到其中.因为图像很大并且需要加载一些,所以需要在Gif加载条的CSS中设置背景图像.

但是,因为src是空的,所以破坏的图像图标仍然出现在使用它的浏览器中.

设置透明的1x1 Gif可以简单有效地解决这个问题,不需要通过CSS或JavaScript添加代码.

Answer 10

与其他人描述的相同的想法在 React 中工作如下：

<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>

Answer 11

自2005 年以来，Mozilla 浏览器（例如 Firefox）已经支持非标准:-moz-brokenCSS 伪类，可以准确完成此请求：

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

img:-moz-broken { display:none; }
img[src="error"]:-moz-broken { display:initial; } /* for demo purposes */

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="error" alt="error image">
</td><td>
  <img src="error" alt="">
</td><td>
  <img src="broken" alt="broken image">
</td><td>
  <img src="broken" alt="">
</td><td>
  <img src="https://i.stack.imgur.com/Mkdgc.png"
   alt="A bird" style="width: 120px">
</td></tr></table>

此示例中有多个单元格。从左到右：

1. 没有属性（基线）的损坏图像alt：显示损坏的图像
2. 带文本的损坏图像alt（基线）：显示替代文本
3. 带有空文本（基线）的损坏图像alt：显示替代文本（无）
4. 带文本的损坏图像alt（我们的 CSS）：隐藏损坏的图像
5. 带有空文本的损坏图像alt（我们的 CSS）：显示替代文本（无）
6. 带文本的功能图像alt（我们的 CSS）：显示图像

img::before也适用于 Firefox 64（尽管曾经如此，img::after所以这是不可靠的）。我无法让其中任何一个在 Chrome 71 中工作。

最兼容的解决方案是指定alt="" 并使用 Firefox 特定的 CSS。

请注意，具有空属性的损坏图像alt并不能保证损坏的图像图标将被抑制，但这似乎确实是 Firefox 103 和 Chromium 103 中的行为。另请注意，这违反了可访问性指南，因为屏幕阅读器将无法用空文本描述项目alt，这可能会破坏盲人用户的体验。