Charger l'image à partir de l'URL en JavaScript

Le message d’aujourd’hui vous expliquera comment charger des images à partir d’URL spécifiées en JavaScript.

Charger l’image à partir de l’URL en JavaScript

L’élément HTML de la balise image intègre une photo/image dans le document. L’attribut src porte la direction de la photo/image que vous devez intégrer.

Src est l’URL de l’image requise pour l’élément image.

Dans les navigateurs prenant en charge srcset, src est traité comme une image candidate avec un descripteur de densité de pixels 1x, sauf si une image avec ce descripteur de densité de pixels est déjà définie dans srcset ou srcset contient des descripteurs w.

Voici la liste des formats de fichiers image les plus couramment utilisés sur le Web.

1. APNG - Graphiques de réseau portables animés
2. GIF - Format d’échange graphique
3. PNG - Graphiques réseau portables
4. WebP - Format d’image Web
5. SVG - Graphiques vectoriels évolutifs
6. JPEG - Image du groupe d’experts en photographie (Joint Photographic Expert Group)
7. AVIF - Format de fichier image AV1.

Les formats comme WebP et AVIF sont recommandés car ils fonctionnent bien mieux que PNG, JPEG et GIF pour les images fixes et animées. WebP est largement pris en charge dans Safari, tandis que AVIF n’est pas pris en charge dans Safari.

SVG est toujours le format recommandé pour les images qui doivent être dessinées avec précision à différentes tailles. Vous pouvez trouver plus d’informations dans la documentation de image.

Comprenons-le avec l’exemple suivant.

<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);
}

Nous avons défini l’élément d’entrée dans l’exemple ci-dessus où l’utilisateur peut entrer dynamiquement la valeur d’une image spécifique. Vous pouvez donner une liste déroulante select au lieu d’une option input et changer l’image en fonction du choix de l’utilisateur.

Une fois que l’utilisateur a cliqué sur le bouton, obtenez le choix de l’utilisateur et créez l’élément img pour le document. Définissez l’emplacement ou le chemin de l’image en tant qu’attribut src et ajoutez l’élément image au DOM existant en tant qu’enfant.

Démo