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
<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
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 Standard # dom-img-currentsrc-dev |
Browser-Kompatibilität
BCD tables only load in the browser