Как обработать изображение не найдена ошибка в теге изображения html5

Question

Я пытаюсь использовать приведенный ниже фрагмент кода:

<picture>
    <source media="(min-width: 1200px)" srcset="https://example.com/images/abc.jpg?resize=169,169">
    <source media="(min-width: 992px)" srcset="https://example.com/images/cde.jpg?resize=132,132">
    <img src="index_files/red_1.jpg" alt="Red 1">
</picture>

Проблема, с которой я сталкиваюсь, заключается в том, что когда abc.jpg или cde.jpg недоступны, должно отображаться изображение по умолчанию, например, например,default.jpg и даже не red_1.jpg Я ссылался на другую похожую тему на сайте, но я не узнал, как решить проблему с помощью HTML.

Можно ли использовать onerror втот случай, если да, где и как?

Answer 1

<picture>
    <source media="(min-width: 1200px)" srcset="https://image.ibb.co/jqzDOe/111.jpg">
    <source media="(min-width: 992px)" srcset="https://preview.ibb.co/bv5HGz/canstockphoto7233482.jpg">
    <img src="https://image.ibb.co/kg3hie/consultant2.jpg" alt="Red 1">
</picture>

Answer 2

Да, использовать событие onerror .Затем вы можете просто изменить атрибут src:

let image = document.querySelector('img');
image.onerror = function() {
  if (this.src === 'default1.png') this.src = 'default2.png';
  else if (this.src !== 'default2.png') this.src = 'default1.png';
}

Это изменит src изображения с того, каким оно было до 'default1.png', а затем, если оно будет запущено снова, на 'default2.png'.