Cargar imagen desde URL en JavaScript
![Cargar imagen desde URL en JavaScript](/img/JavaScript/feature-image---javascript-load-image-from-url.webp)
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.
APNG
- Gráficos de red portátiles animadosGIF
- Formato de intercambio de gráficosPNG
- Gráficos de red portátilesWebP
- Formato de imagen webSVG
- Gráficos vectoriales escalablesJPEG
- Imagen del Grupo Conjunto de Expertos en FotografíaAVIF
- Formato de archivo de imagenAV1
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.
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn