我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
如果你将添加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/
其他回答
我认为最简单的方法是通过text-indent属性隐藏损坏的图像图标。
img {
text-indent: -10000px
}
显然,如果你想看到“alt”属性,它就不起作用了。
这是一个老问题,但这里有一些工作,这里的主要技巧是永远不要设置一个固定的高度和宽度的图像,我只使用百分比。
.example { background - color: # e7e7e7; 填充:25 px; } .image-box { 高度:50 px; 宽度:50 px; border - radius: 8 px; Background-color: rgb(241,255,255); 颜色:rgb(241, 245, 249); 溢出:隐藏; 显示:块; 位置:相对; } .image { 显示:块; max-width: 100%; 高度:100%; object-fit:封面; } < div class = "榜样”> < span class = " image-box”> <img class="image" src="/broken.jpeg" alt> . jpg < / span > < / div >
只使用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中添加边界只是为了演示图像的位置。
您可以按照此路径作为css解决方案
img { 宽度:200 px; 身高:200 px; 位置:相对 } img:{后 内容:“”; 位置:绝对的; 上图:0; 左:0; 宽度:继承; 高度:继承; #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder')无重复中心; 颜色:透明; } < img src = " gdfgd.jpg " >
在理论:
严格的“css only”,我们没有干净的选择。看到其他答案,我没什么可补充的。
在实践中:
我认为在错误事件上添加一个类是最好的方法。这就是我的意思-有答案几乎是这样的,原则是一样的,只是如果你不直接添加样式声明会更优雅。相反,添加一个以后可以针对的类:
<img src="..." onerror="this.classList.add('notfound')">
现在你可以使用img对它进行样式化。没有找到作为选择器。你可以养成一个习惯,把这个小片段添加到你所有的图像中;在你做好造型之前不会有任何伤害。
旁注,在有人评论“这不是一个css唯一的解决方案”之前:是的,谢谢你,队长,确实不是。我试图帮助解决问题本身,一个很多人可能会遇到的问题,而不仅仅是看确切的措辞。