Замена сломанных картинок на сайте средствами JS
Картинка может "сломаться" из-за переноса файлов или папок на хостинге, либо, если изображение находится на стороннем ресурсе - его удаления, переноса и любой другой причины.
Давайте рассмотрим пример как поставить заглушку из другого изображения на данный случай
Для начала необходимо написать функцию-обработчик события onError, которое возникает при ошибке изображения
function imgError(image) {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}
Вместо /images/noimage.gif - напишите ваш путь к картинке, которая будет выводиться в том случае, если оригинальная картинка указанная в src не будет найдена.
Теперь необходимо вызвать наш обработчик в теге img
<img src="image.png" onerror="imgError(this);"/>
Есть еще один вариант использования данной функции, он немного облегчает написание данной функции
<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />
В данном случае весь код функции-обработчика вставлен в тег IMG