Bild anzeigen mit JavaScript

Um ein Bild mit JavaScript anzuzeigen, ändern Sie entweder die src-Eigenschaft eines vorhandenen HTML-Elements <img> oder erstellen ein Bildelement und fügen es in die Seite ein. Die erste Variante eignet sich, wenn ein Bild an Ort und Stelle ersetzt werden soll; ein neues Element ist sinnvoll, wenn Sie ein Bild zu einer Galerie oder einem anderen Container hinzufügen. In beiden Fällen ändert JavaScript das DOM der Seite, während der Browser das Bild lädt, das durch die Quelle angegeben ist.

Die Quelle eines vorhandenen Bildes ändern

Fügen Sie zunächst ein Bild in das HTML ein und geben Sie ihm eine ID. Ein Button kann beim Anklicken seine src-Eigenschaft ändern. Das vollständige Browserbeispiel setzt voraus, dass image1.jpg und image2.jpg unter den gezeigten, relativ zur Seite angegebenen Pfaden verfügbar sind:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Change an image</title>
  <img id="photo" src="image1.jpg" alt="A view of the coast">
  <button id="change">Show the second photo</button>
  <script>
    const photo = document.querySelector("#photo");
    document.querySelector("#change").addEventListener("click", () => {
      photo.src = "image2.jpg";
      photo.alt = "A view of the mountains";
    });
  </script>
</html>

Wenn Sie src ändern, lädt der Browser die neue Ressource. Die ganze Seite wird dadurch weder ersetzt noch neu geladen. Aktualisieren Sie auch alt, wenn das neue Bild einen anderen aussagekräftigen Inhalt hat. Ist das Bild dekorativ und vermittelt der benachbarte Text bereits dieselbe Information, verwenden Sie einen leeren alt-Wert, statt den Text zu wiederholen.

Ein neues Bildelement erstellen und einfügen

Mit document.createElement("img") erstellen Sie ein <img>-Element. Legen Sie dessen Quelle und Alternativtext fest und fügen Sie es anschließend in den gewünschten Container ein. Das folgende statische Browserbeispiel verwendet eine wiederverwendbare Hilfsfunktion und fügt bei jedem Klick auf den Button ein Bild hinzu. Der Pfad images/sunset.jpg muss sich von der Position der Seite aus auflösen lassen.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Add an image</title>
  <button id="add">Add photo</button>
  <div id="gallery"></div>
  <script>
    function addImage(source, description, container) {
      const image = document.createElement("img");
      image.src = source;
      image.alt = description;
      container.appendChild(image);
    }

    const gallery = document.querySelector("#gallery");
    document.querySelector("#add").addEventListener("click", () => {
      addImage("images/sunset.jpg", "Sunset over the water", gallery);
    });
  </script>
</html>

width und height sind optional. Geben Sie sie an, wenn eine bekannte Anzeigegröße dabei hilft, Platz im Layout freizuhalten, oder formatieren Sie das Bild mit CSS. Die width-Eigenschaft eines Bildes wird in CSS-Pixeln gemessen. In responsiven Layouts kann CSS wie max-width: 100%; height: auto das Bild auf die Breite seines Containers begrenzen und dabei seine Proportionen erhalten.

Führen Sie dieses JavaScript-Beispiel aus, um zu sehen, wie eine bekannte Auswahl einem Bildpfad zugeordnet wird. Es veranschaulicht ausführbar die Auswahl der Quelle; die Browserbeispiele oben zeigen die DOM-Operationen.

const imagePaths = {
  coast: "images/coast.jpg",
  mountain: "images/mountain.jpg"
};
const selectedImage = imagePaths.coast;
console.log(selectedImage);

Ein Bild anhand einer Benutzereingabe anzeigen

Legen Sie für ein Dropdown-Menü als Wert jeder Option einen bekannten Bildpfad oder eine bekannte URL fest. Lesen Sie den ausgewählten Wert aus und aktualisieren Sie ein vorhandenes Bild. Dieses Browserbeispiel setzt voraus, dass die beiden Dateien relativ zur Seite im Verzeichnis images/ liegen:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Select an image</title>
  <label for="image-choice">Choose a scene:</label>
  <select id="image-choice">
    <option value="images/coast.jpg">Coast</option>
    <option value="images/mountain.jpg">Mountain</option>
  </select>
  <img id="preview" src="images/coast.jpg" alt="Coastal scene">
  <script>
    const choices = document.querySelector("#image-choice");
    const preview = document.querySelector("#preview");
    const descriptions = {
      "images/coast.jpg": "Coastal scene",
      "images/mountain.jpg": "Mountain scene"
    };

    choices.addEventListener("change", () => {
      preview.src = choices.value;
      preview.alt = descriptions[choices.value];
    });
  </script>
</html>

Die Optionswerte sind in der Seite festgelegt. Daher kann die nutzende Person nur eine von Ihnen bereitgestellte Quelle auswählen. Stammen die Werte aus einer anderen Quelle, prüfen Sie sie vor der Zuweisung anhand einer Liste erlaubter Werte. Für Datei-Uploads verwenden Sie ein Dateiauswahlfeld und erstellen aus der ausgewählten File-Datei eine temporäre Objekt-URL. Geben Sie diese URL wieder frei, sobald sie nicht mehr benötigt wird. Einen lokalen Dateipfad, den eine Person eingibt, kann eine Webseite in der Regel nicht direkt auslesen.

Pfade, Ladevorgang und Barrierefreiheit berücksichtigen

<img> ist ein HTML-Element und kein JavaScript-Tag. JavaScript erstellt die zugehörige DOM-Repräsentation mit document.createElement; src ist die Quelleneigenschaft des Bildes (und entspricht dem src-Attribut), keine Methode. Ein Pfad kann relativ oder absolut sein. Relative Pfade werden von der Dokument-URL aus aufgelöst, die sich vom Verzeichnis der Skriptdatei unterscheiden kann. Ein root-relativer Pfad beginnt am Stammverzeichnis der Website; eine absolute URL enthält Schema und Host.

Wenn ein Bild fehlt, prüfen Sie in den Entwicklertools des Browsers die aktuelle src-Angabe des Elements und öffnen Sie diese URL direkt. Kontrollieren Sie Schreibweise, Groß- und Kleinschreibung, URL der Seite, Bereitstellungsverzeichnis, Serverantwort sowie Meldungen in Netzwerkansicht und Konsole. Ein fehlgeschlagener Bildabruf zeigt sich meist als defektes Bild und Netzwerkfehler. Das unterscheidet sich von einem JavaScript-Fehler, etwa wenn ein Element abgefragt wird, bevor es existiert. Platzieren Sie Skripte hinter dem relevanten Markup oder warten Sie mit der Abfrage, bis das DOM verfügbar ist. Auch die Ereignisse load und error helfen bei der Diagnose, ob der Browser ein Bild abgerufen und dekodiert hat.

Formulieren Sie den alt-Text knapp und beschreiben Sie den nützlichen Bildinhalt, nicht den Dateinamen oder Pfad. Ein gewöhnliches bildübergreifendes Bild lässt sich oft anzeigen, indem seine URL als src gesetzt wird; CORS-Berechtigungen sind für eingeschränkte Vorgänge relevant, etwa wenn Pixel eines bildübergreifenden Bildes über ein Canvas ausgelesen werden. Ob eine bestimmte Ressource geladen werden kann, hängt weiterhin vom entfernten Server und den Richtlinien des Browsers ab.

FAQ

1. Wie ändere ich ein Bild mit JavaScript? Wählen Sie das vorhandene <img>-Element aus und weisen Sie src einen neuen Wert zu. Ändert sich die Bedeutung des Bildes, aktualisieren Sie auch alt.
2. Kann JavaScript mehrere Bilder hinzufügen? Ja. Erstellen Sie für jede Quelle ein <img>-Element und fügen Sie es einer Galerie oder einem anderen Container hinzu. Liegen die Quellen bereits in einem Array vor, können Sie eine Schleife verwenden.
3. Wie kann eine Person auswählen, welches Bild angezeigt wird? Lesen Sie den Wert eines Dropdown-Menüs oder eines anderen Steuerelements beim change-Ereignis aus und setzen Sie src des Vorschaubildes auf eine zulässige Quelle.
4. Kann ich eine externe Bild-URL verwenden? Ja, sofern die URL erreichbar ist und der Server die Browseranfrage zulässt. Zum bloßen Anzeigen eines Bildes ist im Allgemeinen kein CORS-Zugriff erforderlich; das Auslesen seiner Pixel über ein Canvas unterliegt zusätzlichen Cross-Origin-Beschränkungen.
5. Warum wird das Bild nicht angezeigt? Prüfen Sie die aufgelöste URL und den Dateinamen. Suchen Sie anschließend in den Netzwerk- und Konsolenansichten des Browsers nach einem fehlgeschlagenen Abruf oder einem Skriptfehler. Stellen Sie sicher, dass die Datei am Ziel der URL bereitgestellt wird.