Как скрыть значок "изображение не найдено" на IE и хром с помощью CSS

У меня есть несколько изображений на моей странице.

По умолчанию, если заданное изображение недоступно, индикатор отображения сломанного изображения отображается в Chrome и IE.

Мне нечего показывать, но альтернативный текст в этом случае. Есть ли способ обработать его с помощью CSS.

Ответы

Ответ 1

с помощью javascript

<img src="broken.png" onerror="this.style.display='none'"/>

edit: добавлен небольшой снайпер, который будет обрабатывать все изображения.

$("img").error(function(){$(this).hide();});

пример: http://jsfiddle.net/Va2Wd/

Ответ 2

Попробуйте установить alt=" " как пустую строку. Если изображение не найдено, просто будет пустое место.

Ответ 3

Вы можете использовать событие onerror в JavaScript, чтобы действовать, когда изображение не загружается:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

или используйте

var images=document.getElementsByTagName("img");
for(i=0;img[i]!=null;i++)
{
img[i].style.display = "none";
}

Ответ 4

Вместо использования JavaScript или CSS вы можете использовать тег объекта. Это более чистый и простой код. Добавьте альтернативный текст между такими тегами:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp