Как сделать обработчик события на ошибку при загрузке изображения?

Question

Есть несколько маленьких картинок, ниже место под ее увеличенное изображение.

У картинки один путь, у увеличенного изображения другой.

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

Как сделать обработчик события, чтобы выполнялось какое-то действие (alert или что-то еще) при отсутствии картинки по указанному пути?

Код:

const changeImg = (e) => {
  let elem = document.querySelector(".bigImage");
  let source = e.target.getAttribute("src");
  let newSource = source.replace("Small", "Big");
  elem.setAttribute("src", newSource);
}

let images = document.querySelectorAll(".smallImage");
console.log(images);
for (i = 0; i < images.length; i++) {
  console.log(images[i]);
  images[i].addEventListener('click', changeImg);
}

.gallery {
  display: flex;
  margin: 0 auto;
}

.smallImage {
  margin: 0 10px;
}

.bigImage {
  min-height: 480px;
  margin: 50px 10px;
}

<div class="gallery">
  <img class="smallImage" src="imgSmall/jaguar.jpg" alt="jaguar">
  <img class="smallImage" src="imgSmall/eagle.jpg" alt="eagle">
  <img class="smallImage" src="imgSmall/tiger.jpg" alt="tiger">
  <img class="smallImage" src="imgSmall/lion.jpg" alt="lion">
</div>
<div>
  <img class="bigImage" src="#" alt="Увеличенное изображение">
</div>

Answer 1

Вы можете повесить обработчик на onerror

img.onerror = function(e){
  console.log(`Img not found: ${e.target.src}`, e.target);
}

setTimeout(()=> img.src = "404.jpg", 1000);
setTimeout(()=> img.src = "404_again.jpg", 2000);

<img id="img" src="https://via.placeholder.com/150">

Answer 2

Можно повесить прослушку на событие error:

const img = document.querySelector("img")

const respond = () => {
  alert("ERROR")
}

img.addEventListener('error', respond)

<img src="" alt="no image" />

или проверять свойство complete:

if (!img.complete) {
  alert("ERROR") 
}

БЛОГ НА HUSL

Как сделать обработчик события на ошибку при загрузке изображения?

Ответы (2 шт):