La etiqueta HTML <img> se usa para agregar una imagen dentro de la página web/sitio web. Hoy en día, el sitio web no agrega imágenes directamente a una página web, ya que las imágenes están vinculadas a páginas web mediante el uso de la etiqueta <img> que contiene espacio para la imagen.
Sintaxis:
<img src="" alt="" width="" height="">
Atributos: La etiqueta <img> tiene los siguientes atributos.
- src : se utiliza para especificar la ruta a la imagen.
- alt : se utiliza para especificar un texto alternativo para la imagen. Es útil porque informa al usuario sobre lo que significa la imagen y también debido a cualquier problema de red si la imagen no se puede mostrar, se mostrará este texto alternativo.
- crossorigin: Se usa para importar imágenes de sitios de terceros que permiten usar el acceso cross-origin con canvas.
- altura : Se utiliza para especificar la altura de la imagen.
- ancho : Se utiliza para especificar el ancho de la imagen.
- ismap : se utiliza para especificar una imagen como un mapa de imagen del lado del servidor.
- cargando: se utiliza para especificar si un navegador debe diferir la carga de imágenes hasta que se cumplan algunas condiciones o cargar una imagen inmediatamente.
- longdesc: Se utiliza para especificar una URL a una descripción detallada de una imagen.
- referrerpolicy : se utiliza para especificar qué información de referencia usar al obtener una imagen, es decir , sin referencia, sin referencia cuando se degrada, origen, origen cuando se cruza el origen, URL insegura.
- tamaños: se utiliza para especificar tamaños de imagen para diferentes diseños de página.
- srcset: se usa para especificar una lista de archivos de imagen para usar en diferentes situaciones.
- usemap : se utiliza para especificar una imagen como un mapa de imagen del lado del cliente.
Ejemplo 1: En este ejemplo estamos usando la etiqueta <img> junto con los atributos src , width , height y alt .
HTML
<!DOCTYPE html> <html> <body style="text-align: center;"> <h3>GeeksforGeeks logo</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" width="420" height="100" alt="Geeksforgeeks.org"> </body> </html>
Producción:
img src con ancho y alto
Ejemplo 2: en este ejemplo, estamos agregando el atributo de estilo para agregar un borde a la imagen.
HTML
<!DOCTYPE html> <html> <body style="text-align: center;"> <h3>GeeksforGeeks logo</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" width="420" height="100" alt="Geeksforgeeks.org" style="border:5px solid black"> </body> </html>
Producción:
fuente de imagen con borde
Navegadores compatibles:
- Google Chrome
- Borde 12 y superior
- explorador de Internet
- Safari
- Ópera
- Firefox
Publicación traducida automáticamente
Artículo escrito por Mandeep_Sheoran y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA