Question

是否可以通过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是透明的，这将在彼此之上显示两个图像。

Answer 1

这没有CSS：

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

当Javascript被禁用时，它似乎甚至可以工作。

Answer 2

如果您想在混合中添加一些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:"";
}

Answer 3

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

的Javascript

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

HTML

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

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

Answer 4

我不是你使用的技术，但在ASP.net中有一些称为控制适配器的东西。

我用它来捕获所有图像的PreRender，如果图像不完整则替换图像。

我不知道这是否与你的情况有关，当路径上有路径而不是路径时，肯定不会有效。

Answer 5

是的，您可以使用伪选择器的技巧将图像替换为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">

此代码段完全不使用JS，但仅适用于较新的浏览器。

Answer 6

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

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

6 个答案: