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

一种不需要任何代码的基本且非常简单的方法是只提供一个空的alt语句。然后浏览器将返回空白图像。它看起来就像没有图像一样。

例子:

<img class="img_gal" alt="" src="awesome.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中添加边界只是为了演示图像的位置。

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

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

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

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

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

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

编辑:并不能真正解决问题，但可能仍然有用。

这就是我对SASS/SCSS所做的。我有实用工具scss文件，其中包含这个mixin:

  @mixin fallback() {
    background-image: url('/assets/imgs/fallback.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
  }

它在.scss中的用法

img {
  // ...
  @include fallback();
}