Заменить недоступные изображения с помощью CSS?

Насколько мне известно, не существует свойства CSS, управляющего отображением битых изображений. Может быть, есть специфичные для браузера свойства? Возможно, вам придется прибегнуть к Javascript для перебора изображений на странице и замены их src, если они сломаны.

Я не знаю, какую технологию вы используете, но в ASP.net есть что-то, что называется адаптерами управления.

Я использовал это, чтобы захватить PreRender всех изображений и заменить imageurl, если imageurl не полный.

Я не знаю, относится ли это вообще к вашей ситуации и, конечно, не сработает, когда на пути есть путь, но нет изображения.

Это работает без CSS:

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

Кажется, работает даже при отключенном Javascript.

Если вы хотите добавить в смесь некоторый 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:"";
}

Думал, что упакую комментарий от Kmoser в ответ. Очистить обработчик ошибок onerror - хорошая идея, поскольку возможны циклы.

Javascript

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

HTML

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

Мы добавляем эту эпическую функцию во все наши теги изображений сейчас на Twiends, так как мы загружаем множество изображений социальных профилей, срок действия которых истекает в какой-то момент в будущем.

Да, вы можете заменить изображение на 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, но работает только в новых браузерах.