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

我有一个图像与错误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 >

其他回答

Angular隐藏破碎图像的方式。

Html文件内部

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

内部Ts文件

public showImage = true;

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

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

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

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

img {
    text-indent: -10000px
}

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

您可以按照此路径作为css解决方案

img { 宽度:200 px; 身高:200 px; 位置:相对 } img:{后 内容:“”; 位置:绝对的; 上图:0; 左:0; 宽度:继承; 高度:继承; #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder')无重复中心; 颜色:透明; } < img src = " gdfgd.jpg " >

只使用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中添加边界只是为了演示图像的位置。