Agregar imagen en HTML desde una carpeta

1. Use la etiqueta <img> para agregar una imagen desde una carpeta en HTML
2. Use la propiedad CSS background-image para agregar una imagen desde una carpeta en HTML

Este artículo explora diferentes formas de agregar una imagen desde una carpeta en HTML.

Use la etiqueta <img> para agregar una imagen desde una carpeta en HTML

Si tiene una imagen guardada localmente en su sistema, puede agregarla fácilmente a HTML. Puede usar la etiqueta <img> y especificar la ruta de la imagen en el atributo src.

Aunque los pasos son simples, a veces la imagen no aparece en la página web. El problema ocurre principalmente porque la ruta de la imagen es incorrecta y el navegador no puede localizar la imagen.

Por lo tanto, debe establecer la ruta de la imagen correcta en el atributo src.

Consideremos la siguiente estructura.

HTML_project
├── image1.jpg
└── index.html

Aquí, el archivo HTML y la imagen están en el mismo directorio.

Por ejemplo, cree la etiqueta <img> y escriba la ruta image1.jpg para insertar una imagen. Puede utilizar el atributo alt para añadir un texto alternativo.

En algunos casos, la imagen podría no aparecer. Por lo tanto, tendría sentido que los usuarios supieran de qué se trata la imagen.

Cuando se muestra la imagen, no se muestra el texto alternativo. Tenga en cuenta que <img> no tiene una etiqueta de cierre.

Código de ejemplo:

<img src="image1.jpg" alt="Mango Tree">

La imagen y el archivo HTML están en la misma ruta en el ejemplo anterior. Por lo tanto, escribimos solo el nombre del archivo en el atributo src.

Consideremos otro escenario donde una imagen se mantiene dentro de un directorio.

HTML_project
├── images
│   └── image1.jpg
└── index.html

Para tal estructura, podemos establecer la ruta de la imagen de dos maneras.

Código de ejemplo:

<img src="images/image1.jpg" alt="Mango Tree">

Aquí, la ruta dada le dice al navegador que busque un directorio llamado imágenes en el mismo directorio donde se encuentra index.html. A continuación, el navegador localiza el directorio images y encuentra la image1.jpg dentro de él.

Por lo tanto, la imagen se muestra en el navegador.

Código de ejemplo:

<img src="./images/image1.jpg" alt="Mango Tree">

Aquí, el ./ al principio de la ruta indica el directorio actual desde la ubicación de index.html, que es HTML_project. Luego, se ubica el directorio images y se agrega image1.jpg a la página web.

Use la propiedad CSS background-image para agregar una imagen desde una carpeta en HTML

Este método explica la otra forma de agregar una imagen en HTML. Sin embargo, la convención de la ruta del archivo de imagen es similar al primer método.

La única diferencia es que usaremos la propiedad CSS background-image en lugar de la etiqueta <img>.

Escribamos código para cargar la imagen usando CSS para la siguiente estructura.

HTML_project
├── image1.jpg
└── index.html

Código de ejemplo:

<div class = "div1" style="background-image: url('image1.jpg'); height: 200px; width: 200px;">

El fragmento de código anterior crea una imagen de fondo con una altura y un ancho de 200px.

Del mismo modo, consideremos la siguiente estructura.

HTML_project
├── html
│   └── index.html
└── images
    └── image1.jpg

Código de ejemplo:

<div class = "div1" style="background-image: url('../images/image1.jpg'); height: 200px; width: 200px;">

Aquí, ../ significa retroceder un paso en el árbol de directorios. Eso significa que se ha movido del directorio images al directorio HTML_project, donde puede encontrar el directorio images y luego el archivo image1.jpg dentro.

Finalmente, se muestra la imagen.

Así es como puede usar HTML y CSS con la ruta de imagen correcta para agregar una imagen de la carpeta en HTML.