我已经定义了一个带有背景颜色的图像标签，以便在没有图像时显示颜色，但仍然显示损坏的图像图标，如何删除它？
我不想通过添加 jQuery 或任何框架使页面变得臃肿，也不能添加任何类型的 div 到图像中，因为网站几乎完成了。
只使用 JavaScript 找到了答案。
function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
你可以使用以下方法隐藏它：
<img
src="my.png"
onerror="this.style.display='none'"
/>
如果图片无法显示，您可以显示另一张图片，方法如下：
<img src="my.png" onerror="this.src = 'image-not-found.png';" />
document.getElementById('myimage').setAttribute('onerror', "this.src = 'image-not-found.png';");
- Hemant Metalia function ImgError(source){
empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
source.src = "data:image/png;base64," + empty1x1png;
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
一个简单的解决方案是使用一个占位符空图片。这通常用于精灵图，但我认为你也可以使用它。
你需要做的是创建一个带有透明度的1x1像素的空gif图像，将"src"属性指向blank.gif，并通过css的background-image属性来给图片设置背景。 因此，即使找不到背景图片，它也不会显示破损的链接图像。
浏览器会显示那个破损的图标。这不是你可以在代码中更改的东西。我认为你会发现不同的浏览器处理缺失的图像方式不同。
不过，你想要做的事情可能可以用不同的方式来处理...
风格：
div.image-maybe-missing {
width: 300px;
height: 450px;
background-color: red;
background-image: url("/images/is-it-there.png");
}
HTML：
<div class="image-maybe-missing">
</div>
如果图片不存在，这将给您一个带有红色背景的空框。div 的宽度和高度需要与图像的宽度和高度匹配。
这是一些浏览器的特性 - 据我所知，Firefox、Chrome和Safari不显示任何内容，而Internet Explorer则显示一个损坏的图像图标。除非使用Javascript，否则我认为您无法覆盖此行为。
img:-moz-broken{-moz-force-broken-image-icon:1;} 强制显示图片的图标。 - Wesley Murch这是一个依赖于浏览器的行为，但你无法对其进行任何操作。以下是几个选项：
1）使用JavaScript向图像添加onerror处理程序，当图像加载失败时，通过使用CSS将其设置为隐藏来隐藏它（您需要有一个包含div来应用背景颜色，因为如果图像被隐藏，则背景颜色不会显示）。
要在没有jQuery并且不修改代码的情况下为站点中的每个图像应用错误处理程序，可以执行以下操作（将其放在页面末尾的脚本中 - 如果将其放在<head>中，则不起作用，并且不能将其放在window.onload中，否则它将在图像加载之前不起作用）。
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].onerror = function() {
this.style.visibility = 'hidden';
}
}
2) 将图像设置为 div 的 CSS 背景图像，而不是使用 <img> 标签。这样做虽然不太符合语义，但如果加载失败，它不会显示一个损坏的图像图标，并且仍然可以指定背景颜色和标签（而不是 alt 标签）。
<div class="cell">
<p>
<img src="pic.png" onerror="this.remove();" />
</p>
</div>
我使用单元格div来保持布局。
function createImage(image) {
const avatar = document.createElement("img");
avatar.src = `${image}`;
avatar.onerror = function () {
avatar.src = "../../assets/placeholder/avatar.png";
};
};
<img src="../image.png" onerror="this.src='../../assets/images/avatar-placeholder.png';">
alt属性，例如<img src="http://www.dummy.com/dummy.png" alt="my cute cat" />，然后备用文本将显示出你所应用的背景颜色。 - Shadow The Spring Wizard