The read-only HTMLImageElement
property currentSrc
indicates the URL of the image which is currently presented in the <img>
element it represents.
Syntax
let currentSource = htmlImageElement.currentSrc;
Value
A USVString
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.
Example
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
<img src="/files/16797/clock-demo-400px.png" alt="Clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%">
JavaScript
var clockImage = document.querySelector("img"); let p = document.createElement("p"); if (!clockImage.currentSrc.endsWith("200px.png")) { p.innerText = "Using the 200px image."; } else { p.innerText = "Using the 400px image!"; } document.body.appendChild(p);
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'HTMLImageElement.currentSrc' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
currentSrc | Chrome Full support 45 | Edge Full support 13 | Firefox
Full support
38
| IE No support No | Opera Full support Yes | Safari Full support 10.1 | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android
Full support
38
| Opera Android No support No | Safari iOS Full support 10.3 | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.