etiqueta de imagen HTML se utiliza para mostrar imágenes en la página web. La etiqueta HTML img es una etiqueta vacía que contiene solo atributos; las etiquetas de cierre no se utilizan en el elemento de imagen HTML.

Veamos un ejemplo de imagen HTML.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Producción:

Atributos de la etiqueta HTML img

src y alt son atributos importantes de la etiqueta HTML img. Todos los atributos de la etiqueta de imagen HTML se detallan a continuación.

1) origen

Es un atributo necesario que describe la fuente o ruta de la imagen. Le indica al navegador dónde buscar la imagen en el servidor.

La ubicación de la imagen puede estar en el mismo directorio o en otro servidor.

2) todo

El atributo alt define un texto alternativo para la imagen, si no se puede mostrar. El valor del atributo alt describe la imagen en palabras. El atributo alt se considera bueno para el SEO prospectivo.

3) ancho

Es un atributo opcional que se utiliza para especificar el ancho para mostrar la imagen. No es recomendable ahora. Debes aplicar CSS en lugar del atributo de ancho.

procesamiento de piratería

4) altura

Tiene h3 la altura de la imagen. El atributo de altura HTML también admite elementos de iframe, imagen y objeto. No es recomendable ahora. Debes aplicar CSS en lugar del atributo de altura.

Uso del atributo de alto y ancho con etiqueta img

Ha aprendido cómo insertar una imagen en su página web, ahora si queremos dar algo de alto y ancho para mostrar la imagen de acuerdo con nuestros requisitos, entonces podemos configurarlo con los atributos de alto y ancho de la imagen.

Ejemplo:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Producción:

Nota: Intente siempre insertar la imagen con alto y ancho; de lo contrario, puede parpadear mientras se muestra en la página web.

Uso del atributo alt

Podemos usar el atributo alt con etiqueta. Mostrará un texto alternativo en caso de que la imagen no se pueda mostrar en el navegador. El siguiente es el ejemplo del atributo alt:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Producción:

¿Cómo obtener una imagen de otro directorio/carpeta?

Para insertar una imagen en tu web, esa imagen debe estar presente en tu misma carpeta donde has puesto el archivo HTML. Pero si en algún caso la imagen está disponible en algún otro directorio, puede acceder a la imagen de esta manera:

autómatas finitos no deterministas

En la declaración anterior hemos colocado la imagen en el disco local E------>carpeta de imágenes------>img/html-tutorial/39/html-image-2.webp.

Nota: Si la URL src es incorrecta o está mal escrita, no mostrará su imagen en la página web, así que intente ingresar la URL correcta.

Usar etiquetar como enlace

También podemos vincular una imagen con otra página o podemos usar una imagen como enlace. Para hacer esto, ponga etiqueta dentro del etiqueta.

Ejemplo:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Producción:

Navegadores compatibles

Elemento	Cromo	ES DECIR	Firefox	Ópera	Safari
	Sí	Sí	Sí	Sí	Sí