是否可以使用 CSS 检测损坏/卸载（错误）图像？答案

【问题标题】：Is it possible to detect broken/unloaded (error) images with CSS?是否可以使用 CSS 检测损坏/卸载（错误）图像？
【发布时间】：2014-01-15 21:41:42
【问题描述】：

我想为损坏/错误的图像提供一些额外的 CSS：

img:error {
  max-width: 20px;
  max-height: 20px;
}

但这不起作用。有没有办法用纯 CSS 来做到这一点？这个有img 伪选择器吗？甚至更好：一个有效的肮脏黑客？

我环顾四周，但似乎没有人想知道 =)

（是的，我知道 JS 可以做到，我也知道怎么做；不用提了。）

【问题讨论】：

您可以在图像选择器上定义字体样式，这样至少您可以控制替代文本将如何显示以代替丢失的图像。
其他人会指向 ALT 属性吗？
@GCyrillus alt 属性与我的问题无关，但已被提及。
ALT 属性在链接断开时出现

标签： css image broken-image

【解决方案1】：

在 CSS 规范或草案中没有办法，但 Firefox 有一个专有的选择器（伪类）:-moz-broken。它的文档非常简洁，上面写着“主要供主题开发人员使用”，但它可以用于例如如下：

:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }

虽然文档说它“匹配表示损坏的图像链接的元素”，但它实际上匹配损坏的图像（img 元素，其中src 属性不引用图像），无论它们是否是链接。大概，“链接”在这里真正意味着“引用”。

CSS 2.1 说：“该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。”但是Selectors Level 3（CSS3 选择器）只是提到它们：“它们在 CSS 2.1 中进行了解释。”在实践中，浏览器处理它们的方式不同。奇怪的是，Firefox 支持:-moz-broken:after，但忽略了:-moz-broken:before。它不支持普通图像的这些伪元素中的任何一个，但img:after 也支持损坏的图像（即指定的内容出现在alt 属性值之后）。

【讨论】：

:-moz-broken:after 有效吗？ :after 通常不适用于自闭合元素。让我启动旧的 Firefox 并尝试一下。
很有趣，但这将如何运作？像 img 这样的非容器元素不会忽略伪元素吗？
效果很好！破碎的img 显然有:after，而工作图像没有。我找不到类似的 Chrome 选择器 =(
@Danield，好问题，答案很奇怪；我已经扩展了我的答案。
+1 我刚刚验证了这在 Firefox 中有效。谢谢。

【解决方案2】：

为此，您应该使用 alt 属性，如果链接断开，您也可以设置图像背景：示例：

img {
  display:inline-block;
  vertical-align:top;
  min-height:50px;
  min-width:300px;
  line-height:50px;
  text-align:center;
  background:
    linear-gradient(to bottom,
      blue,
      orange,
      green);
  font-size:2em;
  box-shadow:inset 0 0 0 3px;
}

这些样式在图片显示时会被隐藏。 http://codepen.io/anon/pen/Kxipq 如您所见，我们不检查损坏的链接，但提供替代方案，对盲人有用，搜索引擎等，以及一些额外的样式完成它:)

一些额外的Image alt attribute best practices

【讨论】：

display、min-height 和 min-width 肯定也会影响工作图像。
这是一个提示，在标签中使用宽度和高度属性总是一个好习惯，所以我认为您链接的图像大小是已知的
是的，但是如果我将我的图像设置为具有漂亮的alt，我也可能会（无意地）在它起作用时设置它的样式（这自然是假设）。宽度、高度、边框、背景、轮廓等对于损坏的图像非常有用，但也会影响工作图像。这就是为什么我需要一个更具体的选择器。
别搞错了，alt 在图像不可用时显示，并且不应该是工具提示，这是旧 IE 在悬停时显示 alt 的错误。 img 旁边不要带伪元素。请分析代码并注意没有边框，也断开其他链接:)，如果您愿意，请删除最小尺寸...了解 ALT 属性的用途和用途。
+1 这是一个很好的解决方案（但有一个观察结果，替代文本不服从 text-align:center）

【解决方案3】：

不，没有 :error 伪类。这是一个很好的网站，可以提供是的完整列表：

http://reference.sitepoint.com/css/css3psuedoclasses

2015 年 7 月编辑/添加：
（谢谢Rudie）

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

【讨论】：

方便的清单，但不完整。（他们都是。）我喜欢:indeterminate，喜欢:default。
全面≠完整。 ...它已经 18 个月大了...在网络时代很古老。如果您发现链接已过期，请随时更新。
哈哈太亲了！ 2015年哟。谢啦。这个参考呢？ developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
添加...通过复制粘贴 ;-)

【解决方案4】：

没有。 CSS 选择器 level 2.1 或 level 3 中没有任何内容允许定位这样的图像。

【讨论】：

这没什么意义，不需要这个，alt属性本身就是为了这个目的而样式表可以设置它的样式（包，字体大小等）
@GCyrillus 如果我想设置边框、边距、宽度等样式怎么办？这些都会影响损坏的和正常工作的图像。这绝对不一样。造型 alt 很酷，但还不够。
@Rudie，你能测试一下这个codepen.io/gc-nomade/pen/gpQWNM 并告诉我这是否接近你的问题吗？
我不确定我应该看到什么 =) 两个图像都有填充和边距。损坏的图像明显损坏，带有 alt 和红十字（仍然是 Chrome 的损坏图像图标哈哈）。我只希望工作图像具有填充和边距以及框阴影。 screencast.com/t/SfFXf79o9e

【解决方案5】：

<img src="not_found_image.png" onerror='this.style.display = "none"' />

来自： https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/

【讨论】：

不完全是 CSS，但可以在 html 预处理器中使用。