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

我有一个图像与错误src:

<img src="Error.src"/>

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


当前回答

这是一个老问题,但这里有一些工作,这里的主要技巧是永远不要设置一个固定的高度和宽度的图像,我只使用百分比。

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

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

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

这是一个老问题,但这里有一些工作,这里的主要技巧是永远不要设置一个固定的高度和宽度的图像,我只使用百分比。

.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 >

如果你将添加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/