Mostrar espaço reservado se a imagem não for encontrada [duplicado]

Aug 16 2020

Eu estava tentando usar onerror. Sempre que a imagem não for encontrada na pasta, ela exibe um espaço reservado. Meu caminho de imagem é dinâmico e vem de backend. Abaixo está como eu usei.

<img class="" src="{{imagePath}}my_image.jpg" onerror="this.src='{{imagePath}}placeholder.jpg';" alt="Image not found">

Mas isso não está funcionando e dando erro.

Respostas

CarlosEduardoSalazarMori Aug 16 2020 at 10:00

Para isso eu costumava usar picturetag, os navegadores tentarão a primeira fonte, depois, se o navegador não tiver o intérprete de imagem, usará a imgtag.

Como isso:

<picture>
  <source alt="Special Days" srcset="[First Image route].jpg" type="image/jpeg">
  <source alt="Special Days" srcset="[Second Image route].jpg" type="image/jpeg">
  <img alt="Imagen" src="[First Image route].jpg">
</picture>