Signatur
Beschreibung
Die Eigenschaft currentSrc gibt die absolute URL des Bildes zurück, das der Browser für ein <img>-Element tatsächlich ausgewählt hat. Das ist vor allem bei responsiven Bildern wichtig: Hat ein Bild ein srcset-Attribut mit sizes oder steht es in einem <picture>-Element mit mehreren <source>-Kandidaten, entscheidet der Browser selbst anhand von Viewport-Breite, Pixeldichte (devicePixelRatio), Medienabfragen und unterstützten Formaten, welche Datei er lädt.
Im Gegensatz dazu gibt src nur den Wert des src-Attributs wieder (als absolute URL), also meist nur den Fallback. Mit currentSrc findet man heraus, welche Variante wirklich angezeigt wird, zum Beispiel für Analysen, zum Debuggen von srcset-Regeln, für Lazy-Loading-Logik oder um dieselbe Bilddatei in einem Canvas bzw. als CSS-Hintergrund weiterzuverwenden.
Die Eigenschaft ist schreibgeschützt. Solange der Browser noch keine Quelle ausgewählt hat, ist ihr Wert ein leerer String. Deshalb sollte man sie verlässlich erst im load-Ereignis oder nach await img.decode() auslesen. Ändert sich die Auswahl später (etwa weil das Fenster vergrößert wird und eine größere Variante nötig ist), aktualisiert der Browser currentSrc und löst erneut ein load-Ereignis aus.
Rückgabewert
"", wenn noch keine Quelle ausgewählt wurde.Beispiele
Ausgewählte srcset-Variante nach dem Laden ermitteln
// HTML: <img id="hero" src="hero-800.jpg"
// srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
// sizes="(max-width: 600px) 100vw, 50vw" alt="Titelbild">
const img = document.querySelector('#hero');
const logSource = () => {
console.log('src-Attribut:', img.src);
console.log('Geladen wurde:', img.currentSrc);
};
if (img.complete && img.currentSrc) {
logSource();
} else {
img.addEventListener('load', logSource, { once: true });
}Welches Format liefert <picture>? (AVIF/WebP/JPEG)
// HTML:
// <picture>
// <source srcset="foto.avif" type="image/avif">
// <source srcset="foto.webp" type="image/webp">
// <img id="foto" src="foto.jpg" alt="Foto">
// </picture>
const img = document.querySelector('#foto');
const detectFormat = async () => {
await img.decode(); // wartet, bis Quelle gewählt und dekodiert ist
const ext = new URL(img.currentSrc).pathname.split('.').pop();
console.log(`Browser nutzt: ${ext.toUpperCase()}`);
};
detectFormat().catch((err) => console.error('Bild fehlerhaft:', err));Gewählte Variante als Hintergrund wiederverwenden und auf Wechsel reagieren
const img = document.querySelector('img.responsive');
const banner = document.querySelector('.banner');
// load feuert erneut, wenn der Browser bei Größenänderung eine andere Variante wählt
img.addEventListener('load', () => {
banner.style.backgroundImage = `url("${img.currentSrc}")`;
console.log('Hintergrund aktualisiert:', img.currentSrc);
});Vor dem Laden ist currentSrc leer
const img = new Image();
console.log(JSON.stringify(img.currentSrc)); // noch keine Quelle
img.srcset = 'icon-1x.png 1x, icon-2x.png 2x';
img.onload = () => console.log('Gewählt:', img.currentSrc);
img.src = 'icon-1x.png';// Wichtig · Fallstricke
- Zeitpunkt: Direkt nach dem Setzen von
src/srcsetistcurrentSrcoft noch leer oder veraltet. Erst imload-Ereignis bzw. nachimg.decode()auslesen. - Nicht mit
srcverwechseln:srcgibt nur das Attribut wieder, nicht die tatsächlich geladene Datei. - Schreibgeschützt: Eine Zuweisung an
currentSrcwird ignoriert und wirft im Strict Mode einenTypeError. Wer die Quelle ändern will, setztsrcodersrcset. - Browserabhängig: Welche Variante gewählt wird, legt die Spezifikation nicht genau fest. Browser dürfen Cache, Bandbreite oder Datensparmodus berücksichtigen, und manche laden bei kleiner werdendem Viewport keine kleinere Variante nach. Man sollte sich also nicht auf eine bestimmte Datei verlassen.
- Die Eigenschaft gibt es auch bei
HTMLMediaElement(<video>,<audio>) mit derselben Bedeutung. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome 45+, Firefox 38+, Safari 10+, Edge 13+). Internet Explorer kennt sie nicht.