当使用 CSS 找不到图像时，是不是可以为每页定义一个全局“断开链接”图像？ [复制]

Posted 2023-03-05

【中文标题】当使用 CSS 找不到图像时，是不是可以为每页定义一个全局“断开链接”图像？ [复制]

【英文标题】：Is it possible to define a global 'broken link' image per page when the image is not found using CSS? [duplicate]当使用 CSS 找不到图像时，是否可以为每页定义一个全局“断开链接”图像？ [复制]

【发布时间】：2021-01-12 22:23:57

【问题描述】：

如果我在一个网站上工作并从另一个来源接收 html 内容并且该来源包含图像，它将显示“损坏的图像”图像。

我有没有办法使用 HTML 或 CSS 为整个页面定义损坏的图像，并将其作为绝对的最后手段 javascript 函数。首选 HTML 或 CSS 选项？

例如，假设您的工作是用玫瑰图片替换每个损坏的图像。会喜欢 CSS 或 HTML 解决方案。

img 
  width: 100px;
  height: 100px;


img:invalid 
  border: 5px solid #ff0000;


img:error 
  border: 5px solid #ff0000;


div 
  background-color: lightblue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;

<div>Here is some content next to an image that does not exist  <img id="image" src="nothing.jpg"> 
</div>

它是这样的：

有新的 CSS 错误选择器，例如 invalid 和 error。考虑使用伪选择器来匹配损坏的图像是个好主意吗？

此问题想要请求与这些解决方案相关的答案。

相关但不是 CSS 首选：Inputting a default image in case the src attribute of an html <img> is not valid?

【问题讨论】：

问题已更新，包括 CSS 无效和错误伪选择器。请重新打开。

如果所有图像都是不透明的，您可以简单地通过 CSS 设置背景图像，但也许修复链接会更好？为此，只需附加一个指向原始源位置的 元素。

【参考方案1】：

我怀疑这在 JS 之外是否可行。

向图像添加错误事件侦听器。出错时，将 src 属性重新分配给您的 404 图像。例如，使用您的 HTML 和您的头像作为 404 图像：

for (const image of document.querySelectorAll('img')) 
  image.addEventListener('error', () => 
    image.src = 'https://www.gravatar.com/avatar/e3aa08907388338521f3d9cec7a13d32?s=32&d=identicon&r=PG';
  );

#image 
  width: 100px;
  height: 100px;


div 
  background-color: lightblue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;

<div>Here is some content next to an image that does not exist  <img id="image" src="nothing.jpg"> 
</div>

如果您碰巧控制了托管所有图像的服务器，您还可以添加一个处理程序，以防找不到与请求的图像匹配的路径，并返回占位符 404 图像。

【讨论】：

如果我在加载文档后运行该循环，“DOMContentLoaded”是否仍会触发错误事件？

document.querySelectorAll('img') 只选择文档中当前的元素。如果您也需要动态图像，请在插入图像时使用事件委托或附加侦听器。