HTMLImageElement.src
The HTMLImageElement
property src
, which reflects the HTML src
attribute, specifies the image to display in the <img>
element.
Syntax
htmlImageElement.src = newSource; let src = htmlImageElement.src;
Value
When providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src
attribute is a USVString
specifying the URL of the desired image. This can be set either within the HTML itself using the src
content attribute, or programmatically by setting the element's src
property.
If you use the srcset
content attribute to provide multiple image options for different display pixel densities, the URL specified by the src
attribute is used in one of two ways:
- as a fallback for browsers that don't support
srcset
. - as an equivalent for specifying an image in
srcset
with the size multiplier1x
; that is, the image specified bysrc
is used on low-density screens (such as typical 72 DPI or 96 DPI displays).
Additionally, if you use src
along with both sizes
(or the corresponding sizes
content attribute) and srcset
in order to choose an image based on the viewport size, the src
attribute is only used as a fallback for browsers that don't support sizes
and srcset
; otherwise, it's not used at all.
Examples
Specifying a single image
HTML
<img src="grapefruit-slice-332-332.jpg"
width="160"
alt="Slices of grapefruit, looking yummy.">
Result
Using src with an image set
When using a set of images with the srcset
property, the src
serves as either a fallback for older browsers, or as the 1x
size of the image.
HTML
Result
Specifying a fallback for viewport-based selection
When using viewport-bases selection of an image from a srcset
by also specifying the sizes
property, the src
property serves as the fallback to be used on browsers that don't support viewport-based selection. Browsers that do support viewport-based selection will ignore src
in this situation.
HTML
Result
Specifications
Specification |
---|
HTML Standard (HTML) # dom-img-src |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
src |
1 |
12 |
1 |
5.5 |
≤12.1 |
3 |
1 |
Yes |
4 |
≤12.1 |
1 |
Yes |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src