HTMLImageElement: currentSrc-Eigenschaft

Die schreibgeschützte HTMLImageElement-Eigenschaft currentSrc gibt die URL des Bildes an, das derzeit im <img>-Element angezeigt wird, das es repräsentiert.

Wert

Ein String, der die vollständige URL des Bildes angibt, das aktuell im durch das HTMLImageElement dargestellten <img>-Element sichtbar ist. Dies ist nützlich, wenn Sie mehrere Bildoptionen mit den Eigenschaften sizes und/oder HTMLImageElement.srcset bereitstellen. currentSrc ermöglicht es Ihnen festzustellen, welches Bild aus dem bereitgestellten Satz von Bildern vom Browser ausgewählt wurde.

Beispiele

In diesem Beispiel werden zwei verschiedene Größen für ein Bild einer Uhr bereitgestellt. Eine ist 200px breit und die andere ist 400px breit. Das Attribut sizes wird bereitgestellt, um anzuzeigen, dass das Bild bei einer Bildbreite von 50% des Dokuments gezeichnet werden soll, wenn der Viewport unter 400px breit ist; andernfalls wird das Bild bei 90% der Dokumentbreite dargestellt.

HTML

html
<img
  src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png"
  alt="Clock"
  srcset="
    /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
    /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
  "
  sizes="(max-width: 400px) 50%, 90%" />

JavaScript

js
const clockImage = document.querySelector("img");
const p = document.createElement("p");

p.textContent = clockImage.currentSrc.endsWith("200px.png")
  ? "Using the 200px image!"
  : "Using the 400px image.";
document.body.appendChild(p);

Ergebnis

Spezifikationen

Specification
HTML
# dom-img-currentsrc-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
currentSrc

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support