Cargar imagen desde URL en JavaScript

La publicación de hoy enseñará cómo cargar imágenes desde URL específicas en JavaScript.

Cargar imagen desde URL en JavaScript

El elemento HTML de la etiqueta de imagen incrusta una foto/imagen en el documento. El atributo src lleva la dirección a la foto/imagen que necesita incrustar.

Src es la URL de la imagen requerida para el elemento de imagen.

En los navegadores que admiten srcset, src se trata como una imagen candidata con un descriptor de densidad de píxeles 1x, a menos que una imagen con ese descriptor de densidad de píxeles ya esté definida en srcset o srcset contenga descriptores w.

La siguiente es la lista de formatos de archivo de imagen más utilizados en la web.

1. APNG - Gráficos de red portátiles animados
2. GIF - Formato de intercambio de gráficos
3. PNG - Gráficos de red portátiles
4. WebP - Formato de imagen web
5. SVG - Gráficos vectoriales escalables
6. JPEG - Imagen del Grupo Conjunto de Expertos en Fotografía
7. AVIF - Formato de archivo de imagen AV1

Se recomiendan formatos como WebP y AVIF, ya que funcionan mucho mejor que PNG, JPEG y GIF tanto para imágenes fijas como animadas. WebP es ampliamente compatible con Safari, mientras que AVIF no es compatible con Safari.

SVG sigue siendo el formato recomendado para imágenes que deben dibujarse con precisión en varios tamaños. Puede encontrar más información en la documentación de la imagen.

Entendámoslo con el siguiente ejemplo.

<input type="text" value="helloworld" id="imageName"/>
<input type="button" id="insert-btn" value="Insert" />

document.getElementById('insert-btn').onclick = function() {
  const val = document.getElementById('imageName').value;
  const src = 'https://google.com/images/' + val + '.png';
  let imgTag = document.createElement('img');
  imgTag.src = src;
  document.body.appendChild(imgTag);
}

Hemos definido el elemento de entrada dentro del ejemplo anterior donde el usuario puede ingresar dinámicamente el valor de una imagen específica. Puede dar un menú desplegable input en lugar de una opción input y cambiar la imagen según la elección del usuario.

Una vez que el usuario presione el botón, obtenga la elección del usuario y cree el elemento img para el documento. Establezca la ubicación o la ruta de la imagen como el atributo src y agregue el elemento de la imagen al DOM existente como elemento secundario.

Manifestación