HTMLImageElement: currentSrc property
The read-only HTMLImageElement
property
currentSrc
indicates the URL of the image which is
currently presented in the <img>
element it represents.
Value
A string indicating the full URL of the image currently visible in
the <img>
element represented by the HTMLImageElement
.
This is useful when you provide multiple image options using the
sizes
and/or
HTMLImageElement.srcset
properties. currentSrc
lets you
determine which image from the set of provided images was selected by the browser.
Examples
In this example, two different sizes are provided for an image of a clock. One is 200px
wide and the other is 400px wide. The sizes
attribute is
provided to indicate that the image should be drawn at 50% of the document width if the
viewport is under 400px wide; otherwise, the image is drawn at 90% width of the
document.
HTML
html
<img
src="/files/16797/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 400px image!"
: "Using the 200px image.";
document.body.appendChild(p);
Result
Specifications
Specification |
---|
HTML Standard # dom-img-currentsrc-dev |
Browser compatibility
BCD tables only load in the browser