Agregar una imagen desde una URL – HTML

Agregar Una Imagen Desde Una Url Html



En HTML, las imágenes hacen que los sitios web sean más atractivos y logran la intención de las personas. Permite a los desarrolladores personalizar sus páginas web con diferentes imágenes. Además, pueden agregarlos directamente desde Internet copiando la URL de la imagen deseada y luego especificándola como el valor de “ origen atributo ” dentro de la etiqueta de la imagen. Además, los desarrolladores pueden agregar la imagen con la ayuda de la propiedad CSS conocida como “ imagen de fondo ”.

Esta publicación explicará brevemente el método para agregar la imagen desde una URL.

¿Cómo agregar una imagen desde una URL en HTML/CSS?

En HTML/CSS, hay dos métodos disponibles para agregar una imagen mediante la URL, que se enumeran a continuación:







Método 1: Agregar imagen usando el elemento

Él ' El elemento ” es un único elemento vacío que no tiene contenido secundario ni etiqueta final. Él ' origen ' y ' todo ” son dos atributos clave que se utilizan dentro de la etiqueta “ ”.



¡Veamos las instrucciones a continuación para agregar una imagen usando el elemento !



Paso 1: haz un contenedor div

Primero, cree un contenedor div utilizando el '

' etiqueta. Luego, inserte el “ clase ” atribuir y asignar un nombre a la clase según el deseo.





Paso 2: Insertar encabezado

Luego, use la etiqueta de encabezado requerida de “

' a '
' etiqueta. Por ejemplo, utilizaremos la etiqueta

y agregaremos el texto particular como encabezado dentro de las etiquetas de apertura y cierre.


Paso 3: Agrega una imagen usando una URL

Después de eso, agregue un ' ” e inserte los atributos enumerados a continuación dentro de la etiqueta de la imagen:



  • origen El atributo ” se utiliza para agregar el archivo multimedia. Para ello, inicie su navegador web deseado y copie la URL de la imagen deseada.
  • Luego, especifique la URL como un valor de “ origen ' atributo.
  • Próximo, ' todo ” se utiliza para agregar un nombre a la imagen cuando no se muestra por algún motivo.
  • altura La propiedad ” especifica la altura del elemento de acuerdo con el valor dado.
  • ancho ” utilizado para establecer el ancho del elemento:
< división clase = 'img-contenedor' >

< h2 > Agregar imagen con URL < / h2 >

< imagen origen = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' todo = '¡Imagen!' altura = '400px' ancho = '300px' / >

< / división >

De acuerdo con el resultado que se muestra a continuación, la imagen especificada se ha agregado correctamente:



Método 2: Agregar imagen usando propiedades CSS en HTML

Los desarrolladores también pueden agregar la imagen desde una URL usando el CSS “ imagen de fondo ” CSS. para este propósito, siga los pasos dados a continuación.

Paso 1: Insertar encabezado

Primero, inserte un texto de encabezado con la ayuda de la etiqueta de apertura y cierre

.

Paso 2: Crear contenedor div

A continuación, cree un contenedor div utilizando la etiqueta

y agregue un atributo de clase con su nombre:

> Añadir imagen con URL >

= 'img-contenedor' > >

Paso 3: Contenedor de acceso

Ahora, acceda a la clase a través del selector de puntos “ . ” y el nombre de la clase que se creó anteriormente.

Paso 4: Agregar imagen usando la propiedad CSS 'imagen de fondo'

Después de eso, aplique las propiedades CSS que se enumeran a continuación para agregar la imagen desde una URL dentro de la clase:

.img-contenedor {

altura : 400px ;

ancho : 250px ;

tamaño de fondo : Contiene ;

Imagen de fondo : URL ( https : //imágenes .pexels .com/fotos/ 2260800 /pexels-foto- 2260800 .jpeg? auto = comprimir y cs = tinysrgb&w = 1260 & h = 750 &dpr = 1 )

}

En el código proporcionado anteriormente:

  • altura La propiedad ” se utiliza para establecer la altura del elemento.
  • ancho ” se utiliza para especificar el tamaño del ancho del elemento.
  • tamaño de fondo ” se utiliza para configurar el tamaño del elemento de fondo.
  • imagen de fondo La propiedad ” agrega una imagen en la parte posterior del elemento. A tal efecto, el “ URL() La función 'se utiliza para agregar la imagen y pegar la URL de la imagen en la función' () ”.

Producción

Ha aprendido acerca de los diferentes métodos para agregar imágenes desde una URL.

Conclusión

Para agregar una imagen desde una URL, los desarrolladores pueden utilizar el ' ' etiqueta. Luego, inserte el “ origen ” y asigne la URL como el valor “src”. Además, el usuario puede agregar una imagen desde la URL usando el CSS “ imagen de fondo ' propiedad. Este artículo ha establecido los métodos para agregar la imagen desde la URL en HTML/CSS.