Como Usar Imágenes de Respaldo HTML En Caso de Error

3 minuto(s)

En esta página:

Demo Github

Hace unas semanas me encontré con algunos problemas con las imágenes de fuentes externas que no cargaban correctamente. Cambie la imagen de perfil en Twitter de un cliente y al cambiarla no se refleja automáticamente esta nueva imagen. Entonces decidí buscar imágenes alternativas mientras se refleje la imagen original y lo que vi es que podemos cargar una imagen de respaldo, si es que una imagen no carga. En este Post te enseñare a Como Usar Imágenes de Respaldo HTML En Caso de Error, vamos con ello.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Consejos Para Tener Más Tiempo Para Programar” y “Qué Es NoCode Development” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Usar Imágenes de Respaldo HTML En Caso de Error.

Como Usar Imágenes de Respaldo HTML En Caso de Error

Dentro de una página HTML tengo la siguiente imagen de muestra:


<!-- Imagen -->
<img src="https://blog.nubecolectivaaa.com/wp-content/uploads/2020/10/fimg_destacada_blog_devs-930x360.png" class="img-fluid" alt="" >

Si voy al navegador, debería de cargar la imagen sin problemas:

La imagen anterior cargo sin problemas, pero que pasaría si la imagen deja de estar disponible por algun error en el servidor, la ruta está mal escrita o cualquier otro factor que impida que la imagen cargue correctamente.

Por ejemplo, en la ruta de la imagen le agrego 2 letras aa, es decir escribo https://blog.nubecolectivaaa.com …


<!-- Imagen -->
<img src="https://blog.nubecolectivaaa.com/wp-content/uploads/2020/10/fimg_destacada_blog_devs-930x360.png" class="img-fluid" alt="" >

Pues con eso obtengo una imagen rota y molesta que genera una mala experiencia en los usuarios:

Entonces, ¿ Qué podemos hacer cuando esto sucede ?

Podemos hacer uso del atributo de evento HTML onerror y this.src para establecer una imagen de respaldo. Funciona así:


<img
    src="https://blog.nubecolectivaaa.com/wp-content/uploads/2020/10/fimg_destacada_blog_devs-930x360.png" 
    class="img-fluid" 
    alt="" 
    onerror="this.onerror=null; 
    this.src='https://blog.nubecolectiva.com/wp-content/uploads/2022/07/edit_simg_destacada_blog_devs-930x360.png'"
>

<img

src="https://blog.nubecolectivaaa.com/wp-content/uploads/2020/10/fimg_destacada_blog_devs-930x360.png"

class="img-fluid"

alt=""

onerror="this.onerror=null;

this.src='https://blog.nubecolectiva.com/wp-content/uploads/2022/07/edit_simg_destacada_blog_devs-930x360.png'"

En el código anterior, si no existe la imagen del atributo src, entonces el navegador usará la imagen que le definimos en this.src:

Nos ha cargado otra imagen de respaldo, ya que la imagen por defecto no está cargando correctamente.

Al inicio de este tutorial, he colocado una Demo para que puedas ver el proyecto en acción, asimismo he colocado el código en un repositorio de GitHub.

Conclusión

Este truco podría ser una mala práctica, pero recuerda que siempre va haber una ocasión urgente en donde necesitamos algo similar a este truco. Asi que aprovechemos todas las ventajas y trucos que nos brinda HTML.