如何隐藏图像破碎的图标只使用CSS/HTML?

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

.

我有一个图像与错误src:

<img src="Error.src"/>

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

279774 次浏览
小开

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

就像这样:

超文本标记语言

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

CSS

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


}

这里是一个工作的小提琴。

注意:我在CSS中添加边界只是为了演示图像的位置。

小开

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更糟糕的东西，这意味着这个解决方案适用于字面上的一切)。

第一步:引用图像为对象而不是img。当对象失败时，它们不会显示损坏的图标;他们什么都不做。从IE8开始，你可以交替使用object和img标记。你可以调整大小，做所有的光荣的事情，你可以与常规的图像。不要害怕object标签;它只是一个标签，没有大的和笨重的加载，它不会减慢任何东西。您将使用另一个名称使用img标记。速度测试表明它们的使用方式是一样的。

(可选，但很棒)在该对象中插入一个默认图像。如果你想要的图像实际加载在对象中，默认图像将不会显示。例如，你可以显示一个用户头像列表，如果有人在服务器上还没有图像，它可以显示占位符图像……根本不需要JavaScript或CSS，但你得到了大多数人需要JavaScript的功能。

这是代码…

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

．.． 是的，就是这么简单。

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

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

.．.从这个答案中添加CSS ->https://stackoverflow.com/a/32928240/3196360

小开

一种不需要任何代码的基本且非常简单的方法是只提供一个空的alt语句。然后浏览器将返回空白图像。它看起来就像没有图像一样。

例子:

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

试试看吧!;)

小开

如果你仍然需要让图像容器可见，因为它稍后会被填充，并且不想麻烦地显示和隐藏它，你可以在src中插入一个1x1的透明图像:

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

我就是为了这个目的用的。我有一个图像容器，它将通过Ajax将图像加载到其中。因为图片比较大，需要一点时间来加载，所以需要在CSS中设置一个Gif加载条的背景图片。

但是，由于src为空，在使用它的浏览器中仍然会出现破碎的图像图标。

设置透明的1x1 Gif简单有效地解决了这个问题，无需通过CSS或JavaScript添加代码。

小开

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

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>

小开

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

小开

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

img {
text-indent: -10000px
}

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

小开

使用object标签。在标签之间添加可选文本，如下所示:

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

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

小开

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

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


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

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

小开

对于未来的谷歌人来说，2016年有一种浏览器安全的纯CSS方式，可以使用属性选择器隐藏空图像:

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

编辑:我回来了-对于未来的谷歌人来说，在2019中有一种方法可以在Shadow Dom中设置实际的alt文本和alt文本图像，但它只在开发人员工具中工作。所以你不能用它。对不起。那太好了。

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

您可以按照此路径作为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">

小开

如果你想保留/需要图像作为占位符，你可以通过onerror和一些CSS来设置图像大小，将不透明度更改为0。这样你就不会看到断开的链接，但是页面会正常加载。

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


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

从2005开始，Mozilla浏览器(如Firefox)已经支持非标准的:-moz-broken CSS伪类，它可以完成这个请求:

/* 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文本(基线)的破碎图像:显示alt文本
  3. 带有空alt文本的破碎图像(基线):显示alt文本(什么都没有)
  4. 带有alt文本的破碎图像(我们的CSS):隐藏破碎图像
  5. 带有空alt文本的破碎图像(我们的CSS):显示alt文本(什么都没有)
  6. 带有alt文本(我们的CSS)的功能图像:显示图像

img::before也可以在Firefox 64中工作(尽管曾经它是img::after，所以这是不可靠的)。我不能让这两个在Chrome 71中工作。

最兼容的解决方案是指定alt="" 而且来使用特定于firefox的CSS。

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

小开

img::after的技巧是一个好东西，但至少有两个缺点:

  1. 并非所有浏览器都支持(例如，不能在Edge https://codepen.io/dsheiko/pen/VgYErm上工作)
  2. 你不能简单地隐藏图像，你要覆盖它-所以当你在这种情况下显示默认图像时没有什么帮助

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

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

如果你用文本alt = " abc "添加alt，它会显示显示损坏缩略图，和alt消息abc

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

1st

如果你不添加alt，它将显示显示腐败缩略图

<img src="pic_trulli.jpg"/>

2nd

如果你想隐藏破碎的 只要添加alt = " "，它将不会显示损坏的缩略图和任何alt消息(不使用js)

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

如果你想隐藏破碎的 只要添加alt = " ",onerror = " this.style.display =‘没有’”，它将不会显示损坏的缩略图和任何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/

小开

其他人所描述的同样的想法在React中工作如下:

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

编辑:并不能真正解决问题，但可能仍然有用。

这就是我对SASS/SCSS所做的。我有实用工具scss文件，其中包含这个mixin:

  @mixin fallback() {
background-image: url('/assets/imgs/fallback.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}

它在.scss中的用法

img {
// ...
@include fallback();
}
小开

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

<img src="Error.src">


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


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

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

小开

我将以别人的答案为基础。而不是隐藏标签(可能有重要的样式)，给它一个虚拟的图像:

<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>
小开

隐藏图像alt与此

img {
color: transparent;
}
小开

Angular隐藏破碎图像的方式。

Html文件内部

<img *ngIf="showImage" [src]="url" (error)="showImage = false">

内部Ts文件

public showImage = true;
小开

在理论:

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

在实践中:

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

   <img src="..." onerror="this.classList.add('notfound')">
现在你可以使用img.notfound作为选择器来为它设置样式。你可以养成一个习惯，把这个小片段添加到你所有的图像中;在你做好造型之前不会有任何伤害。

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


提交答案