Как скрыть заголовок, если изображение не загрузилось (onerror)?

Question

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

<div class="class1">Заголовок</div>
<div>
  <div>
    <img src=".../[динамическое поле названия 
                   изображения, всегда разное].svg"   
         onerror="this.remove();">
  </div>
</div>

Если изображение не загрузилось или отсутствует, скрыть заголовок данного блока.

Answer 1

Если решать данную задачу через html, то можно например "скрыть" через стили

onerror="this.style.display='none'; this.closest('.block').querySelector('.class1').style.display='none';"

<div class="block">
  <div class="class1">Заголовок</div>
  <div>
    <img src=".../dynamic-name.svg"
         onerror="this.style.display='none';                   
         this.closest('.block').querySelector('.class1').style.display='none';">
  </div>
</div>

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

<div class="block">
  <div class="class1" hidden>Заголовок</div>

  <img src=".../dynamic-name.svg"
       onload="this.closest('.block').querySelector('.class1').hidden = false"
       onerror="this.remove()">
</div>

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

Answer 2

если использование именно html не важно, то можно сделать "чище" и например подключить javascript

блоки if добавила для проверки на всякий случай, если есть .block и сам title

document.querySelectorAll('.block img').forEach(img => {
  img.addEventListener('error', () => {
    const block = img.closest('.block');
    if (block) {
      img.style.display = 'none';
      const title = block.querySelector('.class1');
      if (title) title.style.display = 'none';
    }
  });
});

<div class="block">
  <div class="class1">Заголовок</div>
  <div>
    <img src=".../dynamic-name.svg">
  </div>
</div>

БЛОГ НА HUSL

Как скрыть заголовок, если изображение не загрузилось (onerror)?

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