Как заменить испорченные изображения с помощью JavaScript в документе HTML?

Question

Мне интересно, как вы можете заменить свойство src (или удалить весь img-узел) JavaScript, если браузер понимает, что изображение за пределами свойства image-src не существует (больше не существует) ).

Например:

<div id="foo">
   <img src="bar">
</div>

И img-тег указывает на никуда. В каком-то браузере, особенно то есть, показывают крест без изображения. Я предпочитаю заменять bar альтернативным URL-адресом изображения или заменять img-узел на nbsp .

Я нашел подход , который на самом деле не работал для меня.

Пожалуйста, предлагайте мне решения только с PrototypeJS или raw JS (это проект, использующий PrototypeJS, и я не хочу перегружать его другими инфраструктурами).

Answer 1

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

<img src="..." id="img-1"
     onerror="document.getElementById('img-1').src='working image';">

Или поочередно:

<img src="..." id="img-1"
     onerror="document.getElementById('img-1').parentNode.removeChild(document.getElementById('img-1'));">

Этовероятно, лучше написать это как обработчик событий и прикрепить его ко всем изображениям в документе.