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

例子:

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

试试看吧!；）

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

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

自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文本描述项目，这可能会破坏盲人用户的体验。

Angular隐藏破碎图像的方式。

Html文件内部

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

内部Ts文件

public showImage = true;

如果你将添加alt与文本alt="abc"，它将显示显示腐败缩略图，和alt消息abc

<img src="pic_trulli.jpg" alt="abc"/>

如果你不添加alt，它将显示显示腐败缩略图

<img src="pic_trulli.jpg"/>

如果你想把坏掉的藏起来 只需添加alt=""它将不会显示损坏的缩略图和任何alt消息(不使用js)

<img src="pic_trulli.jpg" alt=""/>

如果你想把坏掉的藏起来 只需添加alt="" & onerror="this.style。Display ='none'"它不会显示损坏的缩略图和任何Alt消息(与js)

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

第四个有点危险(不完全是) ，如果你想在onerror事件中添加任何图像，即使image作为样式存在，它也不会显示。显示就像加法。因此，当您不需要任何替代图像显示时使用它。

display: 'none'; // in css

如果我们在CSS中给出它，那么项目将不会显示(像image, iframe, div之类的)。

如果你想显示图像&你想显示完全空白，如果错误，那么你可以使用，但也要小心，这不会占用任何空间。所以，你需要把它保存在一个div中

链接https://jsfiddle.net/02d9yshw/

缺失的图像要么什么都不显示，要么显示一个[?]样式框，当无法找到它们的源时。相反，你可能想用一个你确定存在的“缺失的图像”图形来替换它，这样就有更好的视觉反馈，表明有问题。或者，你可能想把它完全隐藏起来。这是可能的，因为浏览器无法找到的图像会触发我们可以观察的“错误”JavaScript事件。

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

此外，当发生这种情况时，您可能希望触发某种Ajax操作，向站点管理员发送电子邮件。