通过 CSS 替换不可用的图像？答案

【问题标题】：Replace Unavailable Images via CSS?通过 CSS 替换不可用的图像？
【发布时间】：2010-09-20 16:04:40
【问题描述】：

是否可以通过 CSS 或使用其他技术替换标准损坏的图像？我所有的图像都是相同的大小，并且我有透明度。

我尝试用 div 的背景包装所有图像：

<div class="no_broken">
  <img src="http://www.web.com/found.gif"/>
</div>

<div class="no_broken">
  <img src="http://www.web.com/notfound.gif"/>
</div>

CSS：

div.no_broken { 
  background-image: url(standard.gif); 
}

div.no_broken, div.no_broken img { 
  width: 32px; 
  height: 32px; 
  display: block; 
}

但是如果 IMG 是透明的，这将显示两个图像。

【问题讨论】：

标签： html css image

【解决方案1】：

是的，您可以使用 CSS 替换图像，使用伪选择器的技巧。

基本上，::before 和 ::after 仅适用于图像无法加载的情况。您可以使用绝对定位将 CSS 伪元素放置在损坏的图像占位符上：

img {
    position: relative;
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: text-bottom;
}

    img::before {
        content: 'fall back';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        line-height: 200px;
        background-color: #fd0;
        color: currentColor;
        text-align: center;
        border-radius: 2px;
        display: block;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

<img src="not-found">
<img src="https://via.placeholder.com/200">

这个 sn-p 完全不使用 JS，但只适用于较新的浏览器。

【讨论】：

难以置信。我猜 ::before 属性覆盖了标准错误图标。太棒了。
虽然当时接受的答案可能是准确的，但这是目前最好的解决方案。这应该是新选择的答案。

【解决方案2】：

我想我会将 kmoser 的评论打包成一个答案。清除 onerror 处理程序是一个好主意，因为循环是可能的。

Javascript

function epic(c) {
    c.onerror='';
    c.src='alternative.jpg';
};

HTML

<img src='some.jpg' onerror='epic(this)'>

我们现在将这个史诗般的功能放到twiends 上的所有图片标签中，因为我们会提取大量社交资料图片，这些图片都将在未来某个时间过期。

【讨论】：

【解决方案3】：

如果您想在组合中添加一些 javascript，这应该可以与 jQuery 一起很好地检测图像错误并向损坏的图像添加某种错误状态 CSS 类。

$(document).ready(function () {
    $('.no_broken img').error(function () {
        $(this).addClass('broken');
    });
});

然后在你的 CSS 中你可以有类似的东西

div.no_broken, div.no_broken img { 
  width: 32px; 
  height: 32px; 
  display: block; 
}

div.no_broken img.broken {
    background-image: url(standard.gif);
    content:"";
}

【讨论】：

我喜欢这个，但是设置损坏的图像的content: "" 或display: none 给我带来了其他布局问题。使用opacity: 0 解决了这个问题。

【解决方案4】：

这可以在没有 CSS 的情况下工作：

<img src="some.jpg" onerror="this.src='alternative.jpg';">

它似乎在禁用 Javascript 时也能正常工作。

【讨论】：

这很奇怪。对我来说看起来像 javascript :/ 哦，好吧。这不是浏览器中第一个也不是最后一个奇怪的功能
这在禁用 JavaScript 时不起作用。如果不小心丢失了alternative.jpg，会导致死循环。
要完全使用 CSS，您可以查看此链接 developer.mozilla.org/en-US/docs/CSS/:-moz-broken，然后找到您所针对的其他浏览器的等效项。
这将起作用，但如果alternative.jpg 图像也不可用，浏览器将发出无限数量的请求。出于这个原因，我更喜欢下面 broox 的答案。
要消除对alternative.jpg 的无限请求，请将错误处理程序更改为：<img src="some.jpg" onerror="this.onerror=''; this.src='alternative.jpg';">

【解决方案5】：

我不知道您使用的是什么技术，但在 ASP.net 中有一种叫做控制适配器的东西。

我已经用它来捕获所有图像的 PreRender 并在 imageurl 不完整时替换 imageurl。

我不知道这是否与您的情况有关，并且当有路径但路径上没有图像时肯定不会起作用。

【讨论】：

【解决方案6】：

据我所知，没有 CSS 属性可以控制损坏图像的显示。也许有特定于浏览器的属性？您可能不得不求助于 Javascript 来迭代页面上的图像，并在它们损坏时替换它们的 src。

【讨论】：