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

我有一个图像与错误src:

<img src="Error.src"/>

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


当前回答

如果你想保留/需要图像作为占位符,你可以通过onerror和一些CSS来设置图像大小,将不透明度更改为0。这样你就不会看到断开的链接,但是页面会正常加载。

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

img {
    width: 75px;
    height: 100px;
}

其他回答

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的回答。你不能隐藏整个图像,但是你可以改变破碎图标的外观。

我喜欢尼克的答案,并一直在研究这个解决方案。找到了一个更干净的方法。由于::before/::after伪元素不能用于替换的元素,如img和object,它们只在对象数据(src)未加载时才会工作。它使HTML更加清晰,并且只在对象加载失败时才添加pseudo。

对象{ 位置:相对; 浮:左; 显示:块; 宽度:200 px; 身高:200 px; margin-right: 20 px; 边框:1px纯黑色; } 对象::{后 位置:绝对的; 上图:0; 左:0; 显示:块; 宽度:100%; 高度:100%; 内容:”; 背景:红色url(“http://placehold.it/200x200”); } <object data="http://lorempixel.com/200/200/people/1" type="image/png"></object> . <对象数据= " http://broken。img / url " type = " / png图像“> < /对象>

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

如果你仍然需要让图像容器可见,因为它稍后会被填充,并且不想麻烦地显示和隐藏它,你可以在src中插入一个1x1的透明图像:

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yh5baeaaaaalaaaaabaaeaaaibraa7 "/>

我就是为了这个目的用的。我有一个图像容器,它将通过Ajax将图像加载到其中。因为图片比较大,需要一点时间来加载,所以需要在CSS中设置一个Gif加载条的背景图片。

但是,由于src为空,在使用它的浏览器中仍然会出现破碎的图像图标。

设置透明的1x1 Gif简单有效地解决了这个问题,无需通过CSS或JavaScript添加代码。

Angular隐藏破碎图像的方式。

Html文件内部

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

内部Ts文件

public showImage = true;