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:
- Formatos de Colores que Soporta HTML 5
- Notificaciones Desktop con HTML5
- Hacer nuestro contenido Editable con HTML5
- Aprende los Códigos de Errores al hacer peticiones HTTP al servidor
- 5 Atributos Globales de HTML5 que nos pueden ser Útiles
- Manipular una Lista Ordenada con el Atributo Type en HTML
- Que es el Atributo Aria-* en HTML, como funciona y otros detalles
- Como habilitar el Dibujado con el mouse sobre un canvas HTML 5 (Desktop)
- Como Crear Notaciones Matemáticas en HTML 5
- Los Tipos de Rutas de Archivos que existen en HTML 5
- Puedes leer más en la categoría HTML 5
-
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:
|
1 2 3 4 |
<!-- 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 …
|
1 2 3 4 |
<!-- 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í:
|
1 2 3 4 5 6 7 8 9 |
<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.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.