4

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

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

При нажатии на картинку, 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>

2 ответа 2

3

Вы можете повесить обработчик на 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">

5
  • Только, в таком виде он будет срабатывать и при загрузке страницы, т.к. в примере автора изначально не указан путь картинки. P.s. искал, как бы на onerror поймать именно 404 - не нашел) 19 сен 2020 в 9:58
  • а если указать путь к картинке заглушке например? Чтобы при загрузке не срабатывал? 19 сен 2020 в 10:05
  • @OPTIMUSPRIME, но ведь автор вопроса спрашивает как повесить обработчик события на ошибку а, не как ловить ошибку при изменении. Если же отойти от формулировок, то можно просто проверять e.target.src != "#"
    – Ein
    19 сен 2020 в 10:05
  • Подскажи, если нет изображения по пути, то значение подставляется # или нет? 19 сен 2020 в 11:06
  • Нет, значение в случае ошибки не меняется. Просто в примере изначально у картинки src="#", поэтому я предложил проверять это значение, дабы отсеять вызов при загрузке страницы
    – Ein
    19 сен 2020 в 11:20
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") 
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.