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

Можно ли заменить стандартное разбитое изображение с помощью 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 прозрачен.

Ответ 1

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

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

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

Ответ 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:"";
}

Ответ 3

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

Javascript

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

HTML

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Этот код является JavaScript и будет работать только при включенном JS. Как это ни странно, это также работает, если в IE, если файл доступен с локальной машины (с файлом:///). Когда страница доступна с помощью http, она не будет работать без JS.