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

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

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

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

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

如果你仍然需要让图像容器可见，因为它稍后会被填充，并且不想麻烦地显示和隐藏它，你可以在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;

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

例子:

<img class="img_gal" alt="" src="awesome.jpg">

试试看吧!；）

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

不管人们在这里说什么，你根本不需要JavaScript，甚至不需要CSS!

这实际上是非常可行和简单的HTML。 如果图像未加载，您甚至可以显示默认图像。这就是……

这也适用于所有浏览器，甚至早在IE8(在2015年9月我主持的网站的25万多名访问者中，没有人使用比IE8更糟糕的浏览器，这意味着这个解决方案几乎适用于所有浏览器)。

步骤1:将图像引用为对象而不是img。当对象失败时，它们不会显示损坏的图标;他们什么都不做。从IE8开始，你可以交替使用object和img标记。你可以调整大小，做所有的光荣的事情，你可以与常规的图像。不要害怕object标签;它只是一个标签，没有大的和笨重的加载，它不会减慢任何东西。您将使用另一个名称使用img标记。速度测试表明它们的使用方式是一样的。

步骤2:(可选，但很棒)在对象中插入默认图像。如果你想要的图像实际加载到对象中，默认图像将不会显示。例如，你可以显示一个用户头像列表，如果有人在服务器上还没有图像，它可以显示占位符图像……根本不需要JavaScript或CSS，但你得到了大多数人需要JavaScript的功能。

这是代码…

<object data="avatar.jpg" type="image/jpeg">
    <img src="default.jpg" />
</object>

．.． 是的，就是这么简单。

如果你想用CSS实现默认的图像，你可以让它在你的HTML更简单，像这样…

<object class="avatar" data="user21.jpg" type="image/jpeg"></object>

.．.并添加CSS从这个答案-> https://stackoverflow.com/a/32928240/3196360