The HTMLImageElement property src, which reflects the HTML src attribute, specifies the image to display in the <img> element. 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 string 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: 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. <img
src="grapefruit-slice-332-332.jpg"
width="160"
alt="Slices of grapefruit, looking yummy." />
Value
Examples
Specifying a single image
HTML
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
HTML Standard # dom-img-src |
Browser compatibility
BCD tables only load in the browser
Clear Img src attribute using JavaScript #
To clear an image src attribute:
- Use the setAttribute() method to set the image's src attribute to an empty string.
- Alternatively, hide the image element.
Here is the HTML for the examples in this article.
Copied!
And here is the related JavaScript code.
Copied!
const img = document.getElementById('img'); // 👇️ set image src attribute to empty string img.setAttribute('src', ''); // 👇️ or hide image img.style.display = 'none';We used the setAttribute method to set the src attribute of the image element to an empty string.
However, if you do that the image is still displayed as being broken.
Alternatively, you can hide the image by setting its display property to none.
We used the display property to hide the image element, however you might need to use the visibility property, depending on your use case.
When an element's display property is set to none, the element is removed from the DOM and has no effect on the layout. The document is rendered as though the element does not exist.
On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however the element is invisible (not drawn). It still affects the layout on your page as normal.
Here is an example that sets the image's visibility property to hidden.
Copied!
const img = document.getElementById('img'); img.style.visibility = 'hidden';When the image's visibility is set to hidden, it is invisible, however it still takes up space on the page.
If you set the image's display property to none, the element is removed from the DOM and other elements take its space.