自2005年以来，Mozilla浏览器(如Firefox)已经支持了非标准的:-moz-broken CSS伪类，它可以完成这个请求:

/* for display purposes so you can see the empty cell */ td { min-width:64px; } img:-moz-broken { display:none; } img[src="error"]:-moz-broken { display:initial; } /* for demo purposes */ <table border="1"><tr><td> <img src="error"> </td><td> <img src="error" alt="error image"> </td><td> <img src="error" alt=""> </td><td> <img src="broken" alt="broken image"> </td><td> <img src="broken" alt=""> </td><td> <img src="https://i.stack.imgur.com/Mkdgc.png" alt="A bird" style="width: 120px"> </td></tr></table>

本例中有几个单元格。从左到右:

没有alt属性的破碎图像(基线):显示破碎图像 带有alt文本的破碎图像(基线):显示alt文本 带有空alt文本的破碎图像(基线):显示alt文本(什么都没有) 一个破碎的图像与alt文本(我们的CSS):隐藏破碎的图像 一个破碎的图像与空alt文本(我们的CSS):显示alt文本(什么都没有) 一个功能图像与alt文本(我们的CSS):显示图像

img::before也可以在Firefox 64中工作(虽然曾经是img::after，所以这是不可靠的)。我不能让这两个在Chrome 71中工作。

最兼容的解决方案是指定alt=""并使用特定于firefox的CSS。

注意，带有空alt属性的破碎图像并不能保证破碎图像图标将被抑制，但这似乎是Firefox 103和Chromium 103中的行为。还要注意，这违反了可访问性准则，因为屏幕阅读器将无法用空alt文本描述项目，这可能会破坏盲人用户的体验。

隐藏图像alt与此

img {
   color: transparent;
}

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

img {
    text-indent: -10000px
}

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

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

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

可以使用before和after作为样式，以防止图像损坏。

<img src="Error.src">

img:before {
  content: url("image.jpg");
}

img:after {
  content: "(url: " attr(src) ")";
}

在这种情况下，如果src中的图像被破坏了，它将使用之前的内容，如果没有错误，它将使用src。

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

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