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

这在没有CSS的情况下有效:

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

当Javascript被禁用时,它似乎也能工作。

是的,您可以使用伪选择器的技巧用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">

如果您想在混合中添加一些javascript,这应该与jQuery配合使用,以检测图像错误,并向损坏的图像添加某种错误状态CSS类。

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

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

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

我想我会把你的评论打包 科摩瑟

Javascript

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

HTML

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

我们现在把这个史诗般的功能放到我们所有的图像标签中 twiends

我不知道您正在使用什么技术,但在ASP.net中有一种称为控制适配器的技术。

我使用它捕获所有图像的预渲染,如果imageurl不完整,则替换imageurl。

我不知道这是否与你的情况有关,当有一条路径,但路径上没有图像时,肯定不会起作用。