Bild von URL in JavaScript laden

Der heutige Beitrag behandelt das Laden von Bildern von bestimmten URLs in JavaScript.

Bild von URL in JavaScript laden

Das HTML-Element des Bild-Tags bettet ein Foto/Bild in das Dokument ein. Das Attribut src enthält die Richtung zu dem einzubettenden Foto/Bild.

Src ist die URL des Bildes, das für das Bildelement benötigt wird.

In Browsern, die srcset unterstützen, wird src wie ein Kandidatenbild mit einem 1x-Pixeldichte-Deskriptor behandelt, es sei denn, ein Bild mit diesem Pixeldichte-Deskriptor ist bereits in srcset definiert oder srcset enthält w-Deskriptoren.

Im Folgenden finden Sie eine Liste der im Internet am häufigsten verwendeten Bilddateiformate.

1. APNG - Animierte tragbare Netzwerkgrafiken
2. GIF – Grafikaustauschformat
3. PNG - Portable Netzwerkgrafik
4. WebP - Webbildformat
5. SVG - Skalierbare Vektorgrafiken
6. JPEG - Bild der gemeinsamen fotografischen Expertengruppe
7. AVIF - AV1 Bilddateiformat

Formate wie WebP und AVIF werden empfohlen, da sie sowohl für Standbilder als auch für animierte Bilder viel besser funktionieren als PNG, JPEG und GIF. WebP wird in Safari weitgehend unterstützt, während AVIF in Safari nicht unterstützt wird.

SVG ist immer noch das empfohlene Format für Bilder, die in verschiedenen Größen genau gezeichnet werden müssen. Weitere Informationen finden Sie in der Dokumentation zum image.

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

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

Wir haben das Eingabeelement innerhalb des obigen Beispiels definiert, wo der Benutzer den Wert für ein bestimmtes Bild dynamisch eingeben kann. Sie können anstelle einer input-Option ein select-Dropdown-Menü angeben und das Bild basierend auf der Auswahl des Benutzers ändern.

Sobald der Benutzer auf die Schaltfläche klickt, erhalten Sie die Benutzerauswahl und erstellen Sie das img-Element für das Dokument. Legen Sie den Speicherort oder Pfad des Bildes als Attribut src fest und hängen Sie das Bildelement als untergeordnetes Element an das vorhandene DOM an.

Demo