我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
我认为最简单的方法是通过text-indent属性隐藏损坏的图像图标。
img {
text-indent: -10000px
}
显然,如果你想看到“alt”属性,它就不起作用了。
其他回答
一种不需要任何代码的基本且非常简单的方法是只提供一个空的alt语句。然后浏览器将返回空白图像。它看起来就像没有图像一样。
例子:
<img class="img_gal" alt="" src="awesome.jpg">
试试看吧!;)
自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>
本例中有几个单元格。从左到右:
没有alt属性的破碎图像(基线):显示破碎图像 带有alt文本的破碎图像(基线):显示alt文本 带有空alt文本的破碎图像(基线):显示alt文本(什么都没有) 一个破碎的图像与alt文本(我们的CSS):隐藏破碎的图像 一个破碎的图像与空alt文本(我们的CSS):显示alt文本(什么都没有) 一个功能图像与alt文本(我们的CSS):显示图像
img::before也可以在Firefox 64中工作(虽然曾经是img::after,所以这是不可靠的)。我不能让这两个在Chrome 71中工作。
最兼容的解决方案是指定alt=""并使用特定于firefox的CSS。
注意,带有空alt属性的破碎图像并不能保证破碎图像图标将被抑制,但这似乎是Firefox 103和Chromium 103中的行为。还要注意,这违反了可访问性准则,因为屏幕阅读器将无法用空alt文本描述项目,这可能会破坏盲人用户的体验。
不管人们在这里说什么,你根本不需要JavaScript,甚至不需要CSS!
这实际上是非常可行和简单的HTML。 如果图像未加载,您甚至可以显示默认图像。这就是……
这也适用于所有浏览器,甚至早在IE8(在2015年9月我主持的网站的25万多名访问者中,没有人使用比IE8更糟糕的浏览器,这意味着这个解决方案几乎适用于所有浏览器)。
步骤1:将图像引用为对象而不是img。当对象失败时,它们不会显示损坏的图标;他们什么都不做。从IE8开始,你可以交替使用object和img标记。你可以调整大小,做所有的光荣的事情,你可以与常规的图像。不要害怕object标签;它只是一个标签,没有大的和笨重的加载,它不会减慢任何东西。您将使用另一个名称使用img标记。速度测试表明它们的使用方式是一样的。
步骤2:(可选,但很棒)在对象中插入默认图像。如果你想要的图像实际加载到对象中,默认图像将不会显示。例如,你可以显示一个用户头像列表,如果有人在服务器上还没有图像,它可以显示占位符图像……根本不需要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
如果你仍然需要让图像容器可见,因为它稍后会被填充,并且不想麻烦地显示和隐藏它,你可以在src中插入一个1x1的透明图像:
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yh5baeaaaaalaaaaabaaeaaaibraa7 "/>
我就是为了这个目的用的。我有一个图像容器,它将通过Ajax将图像加载到其中。因为图片比较大,需要一点时间来加载,所以需要在CSS中设置一个Gif加载条的背景图片。
但是,由于src为空,在使用它的浏览器中仍然会出现破碎的图像图标。
设置透明的1x1 Gif简单有效地解决了这个问题,无需通过CSS或JavaScript添加代码。
隐藏图像alt与此
img {
color: transparent;
}