Angular隐藏破碎图像的方式。

Html文件内部

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

内部Ts文件

public showImage = true;

如果你想保留/需要图像作为占位符，你可以通过onerror和一些CSS来设置图像大小，将不透明度更改为0。这样你就不会看到断开的链接，但是页面会正常加载。

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

img {
    width: 75px;
    height: 100px;
}

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

在理论:

严格的“css only”，我们没有干净的选择。看到其他答案，我没什么可补充的。

在实践中:

我认为在错误事件上添加一个类是最好的方法。这就是我的意思-有答案几乎是这样的，原则是一样的，只是如果你不直接添加样式声明会更优雅。相反，添加一个以后可以针对的类:

   <img src="..." onerror="this.classList.add('notfound')">

现在你可以使用img对它进行样式化。没有找到作为选择器。你可以养成一个习惯，把这个小片段添加到你所有的图像中;在你做好造型之前不会有任何伤害。

旁注，在有人评论“这不是一个css唯一的解决方案”之前:是的，谢谢你，队长，确实不是。我试图帮助解决问题本身，一个很多人可能会遇到的问题，而不仅仅是看确切的措辞。

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

<img src="Error.src">

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

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

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

隐藏图像alt与此

img {
   color: transparent;
}