HTMLInputElement.src — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.src

Beschreibung

Die Eigenschaft src spiegelt das HTML-Attribut src eines <input>-Elements. Sinnvoll ist sie nur bei type="image": Dann wird das Eingabefeld als Bild dargestellt, und ein Klick darauf sendet das Formular ab – ähnlich wie ein <button type="submit">.

Beim Lesen liefert die Eigenschaft immer eine absolute, aufgelöste URL, auch wenn im Attribut eine relative Angabe steht. Für den wörtlichen Attributwert verwenden Sie getAttribute("src"). Beim Schreiben wird das Attribut gesetzt, und der Browser lädt das neue Bild sofort.

Typische Anwendungsfälle sind das Austauschen des Schaltflächenbildes je nach Zustand (z. B. Lade-Indikator nach dem Absenden, Hover-Effekte, Theme-Wechsel) oder das dynamische Erzeugen grafischer Senden-Schaltflächen. Beim Absenden über ein Bild-Input übermittelt der Browser zusätzlich die Klickkoordinaten als name.x und name.y.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: URL (relativ oder absolut) des anzuzeigenden Bildes. Relative Pfade werden gegen die Basis-URL des Dokuments aufgelöst.

Rückgabewert

Typ

string

Beschreibung

Die vollständig aufgelöste, absolute URL des Bildes oder "", wenn kein src-Attribut gesetzt ist.

Beispiele

Aufgelöste URL auslesen

// HTML: <input type="image" id="senden" src="img/senden.png" alt="Absenden">
const btn = document.getElementById("senden");

console.log(btn.src);                  // absolute URL
console.log(btn.getAttribute("src")); // wörtlicher Attributwert

https://example.com/img/senden.png img/senden.png

Bild beim Absenden durch Lade-Indikator ersetzen

const form = document.querySelector("#bestellung");
const btn = form.querySelector('input[type="image"]');

form.addEventListener("submit", () => {
  btn.src = "/img/spinner.gif";
  btn.alt = "Wird gesendet …";
  btn.disabled = true;
});

Grafische Senden-Schaltfläche dynamisch erzeugen

const btn = document.createElement("input");
btn.type = "image";
btn.name = "karte";
btn.src = "/img/weltkarte.png";
btn.alt = "Region auswählen";

document.querySelector("form").append(btn);

// Beim Absenden werden karte.x und karte.y übertragen
btn.addEventListener("click", (e) => {
  console.log(`Klick bei ${e.offsetX}/${e.offsetY}`);
});

Klick bei 120/45

Bild je nach Farbschema wechseln

const btn = document.querySelector('input[type="image"]');
const mq = matchMedia("(prefers-color-scheme: dark)");

const aktualisieren = () => {
  btn.src = mq.matches ? "/img/senden-dunkel.svg" : "/img/senden-hell.svg";
};

aktualisieren();
mq.addEventListener("change", aktualisieren);

// Wichtig · Fallstricke

Nur bei type="image" wirksam: Bei anderen Typen wird der Wert zwar gespeichert, aber ignoriert – es wird kein Bild geladen.
Getter liefert absolute URL: Vergleiche wie btn.src === "img/a.png" schlagen fehl. Nutzen Sie getAttribute("src") oder new URL(btn.src).pathname.
Barrierefreiheit: Immer ein aussagekräftiges alt-Attribut setzen; es dient als Beschriftung der Schaltfläche für Screenreader und wird angezeigt, falls das Bild nicht lädt.
Sicherheit: Keine ungeprüften Benutzereingaben als URL setzen. Bildquellen unterliegen der CSP-Direktive img-src; blockierte Quellen führen zu einer leeren Schaltfläche.
Ladefehler lassen sich über die Events load und error am Input-Element abfangen.
Von allen gängigen Browsern seit langem unterstützt.

Siehe auch

HTMLEmbedElement.src HTMLInputElement.alt HTMLInputElement.form HTMLInputElement.max HTMLInputElement.min