Cargar imagen por defecto en HTML

Si quieres ir al turrón clic aquí

Camarón que se duerme, se lo lleva la corriente

Estamos viviendo en una era marcada por el cambio acelerado.

Lo que hace unos años parecía ciencia ficción, hoy es parte de nuestra rutina diaria.

La tecnología, la comunicación y la forma en que interactuamos con el mundo han cambiado muchísimo.

Cada día, nuevas innovaciones aparecen para transformar nuestra vida personal y profesional, obligándonos a adaptarnos continuamente.

Y si no te adaptas ya sabes lo que dicen...

Renovarse o morir

Pienso que la capacidad de aprendizaje, la flexibilidad y la disposición a aceptar cambios son hoy más valiosas que cualquier conocimiento técnico o habilidad específica.

La velocidad a la que se desarrollan las nuevas tecnologías y las nuevas formas de relacionarnos exige no solo una mentalidad abierta, sino también una voluntad de evolución constante.

Lo que ayer funcionaba puede no servir hoy, y lo que hoy estamos implementando seguramente cambiará mañana.

¿Cómo cargaba imágenes por defecto en Angular?

Antes para cargar una imagen por defecto en Angular si fallaba la carga de la imagen original lo hacía con una directiva Angular.

Te dejo el link al artículo que escribí a principios de 2022.

Crea una directiva personalizada en Angular 👈

Aprende qué es una directiva en Angular y aprende a crear una directiva personalizada

¿Cómo cargar imágenes por defecto en HTML?

Con el atributo onerror de la etiqueta img

En el atribujo onerror especificas un código JavaScrip que se ejecutará cuando la imagen no se cargue correctamente.

Te pongo un ejemplo:

<img
    onerror="this.onerror=null;this.src='url_de_la_imagen_a_cargar_si_falla_la_imagen_que_quiero_cargar'"
    src="url_de_la_imagen_que_quiero_cargar"
    alt="Logo de fjmduran"
/>
        

1. src="url_de_la_imagen_que_quiero_cargar" El navegador intentará cargar la imagen desde la URL url_de_la_imagen_que_quiero_cargar. Si la imagen se carga correctamente, no ocurrirá ningún error y el navegador la mostrará.
2. onerror="this.onerror=null;this.src='url_de_la_imagen_a_cargar_si_hay_fallo'"
   • Si ocurre un error al cargar la imagen original (es decir, si no puede ser encontrada o cargada), se ejecuta este código JavaScript.
   • this.onerror=null;: Esto desactiva el evento onerror en ese momento. Esto es para evitar un posible bucle infinito: si el src de la imagen de respaldo (la imagen alternativa) también falla, onerror no se ejecutará nuevamente y no intentará reemplazar la imagen una vez más, lo que evitaría un ciclo repetitivo.
   • this.src='url_de_la_imagen_a_cargar_si_hay_fallo'": Aquí se reemplaza el atributo src de la imagen fallida con una URL alternativa. En este caso, apunta a una imagen de respaldo cuya URL es url_de_la_imagen_a_cargar_si_hay_fallo Si la primera imagen falla, se mostrará esta en su lugar.

Hasta luego 🖖