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

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 в ответ. Очистка обработчика ошибки - хорошая идея, поскольку возможны циклы.

Javascript

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

HTML

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

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

Answer 4

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

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

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

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

Answer 6

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