我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
我认为最简单的方法是通过text-indent属性隐藏损坏的图像图标。
img {
text-indent: -10000px
}
显然,如果你想看到“alt”属性,它就不起作用了。
其他回答
只使用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中添加边界只是为了演示图像的位置。
如果你想保留/需要图像作为占位符,你可以通过onerror和一些CSS来设置图像大小,将不透明度更改为0。这样你就不会看到断开的链接,但是页面会正常加载。
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
如果你仍然需要让图像容器可见,因为它稍后会被填充,并且不想麻烦地显示和隐藏它,你可以在src中插入一个1x1的透明图像:
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yh5baeaaaaalaaaaabaaeaaaibraa7 "/>
我就是为了这个目的用的。我有一个图像容器,它将通过Ajax将图像加载到其中。因为图片比较大,需要一点时间来加载,所以需要在CSS中设置一个Gif加载条的背景图片。
但是,由于src为空,在使用它的浏览器中仍然会出现破碎的图像图标。
设置透明的1x1 Gif简单有效地解决了这个问题,无需通过CSS或JavaScript添加代码。
如果你将添加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/
CSS/HTML没有办法知道图像是否断开链接,所以无论如何你都必须使用JavaScript
但这里有一个隐藏图像或用备份替换源的最小方法。
<img src="Error.src" onerror="this.style.display='none'"/>
or
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
更新
你可以一次将这个逻辑应用到多个图像上,如下所示:
文档。addEventListener("DOMContentLoaded",函数(事件){ document.querySelectorAll (img) .forEach(函数(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的回答。你不能隐藏整个图像,但是你可以改变破碎图标的外观。