To replace one image, retrieve it by its unique ID and assign a new value to its src property:
const img = document.getElementById("hero");
if (img) {
img.src = "new-image.jpg";
}getElementById() returns the element whose id matches the supplied string. The null check prevents an error when no matching element exists.
Change one image by ID
Give the image a unique, correctly capitalized ID in your HTML:
<img id="hero" src="old-image.jpg" alt="Homepage hero">Then update it from JavaScript:
const img = document.getElementById("hero");
if (img) {
img.src = "new-image.jpg";
}The assignment changes the image source and causes the browser to request the new file. The method name is exactly getElementById; the ID comparison is case-sensitive, so hero and Hero are different. A missing match returns null. See MDN’s getElementById() reference and the HTMLImageElement documentation.
Recommended Free Tools
#1 Best Overall
Use the correct script timing
Run the lookup after the image is present in the document. A script placed just before the closing </body> tag generally runs after the markup has been parsed:
<img id="hero" src="old-image.jpg" alt="Homepage hero">
<script src="app.js"></script>If the script is in the document head, defer it or wait for parsing to finish:
Rank #2
document.addEventListener("DOMContentLoaded", () => {
const img = document.getElementById("hero");
if (img) img.src = "new-image.jpg";
});Apply the same source to several images
An ID lookup is for one uniquely identified element, not a group. When several images should receive the same source, use a selector that describes that set and iterate over the returned elements:
const images = document.querySelectorAll("img.replaceable");
images.forEach((img) => {
img.src = "new-image.jpg";
});Matching HTML might be:
<img class="replaceable" src="one.jpg" alt="First view">
<img class="replaceable" src="two.jpg" alt="Second view">querySelectorAll() can select multiple matches. You can also target a container or another attribute when that more accurately defines the intended set. MDN documents these approaches in Selection and traversal on the DOM tree.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →| Need | Approach | Example selector |
|---|---|---|
| One known image | getElementById() |
document.getElementById("hero") |
| Several images with a shared class | querySelectorAll() plus iteration |
document.querySelectorAll("img.replaceable") |
Keep alternative text accurate
The alt attribute provides a text alternative when an image cannot be displayed and helps convey its purpose to users of assistive technology. If the replacement image communicates different information, update its alternative text as well:
const img = document.getElementById("hero");
if (img) {
img.src = "product-detail.jpg";
img.alt = "Close-up of the product controls";
}For guidance on appropriate alternative text, see MDN’s <img> element reference.
Quick Recap
Rank #4
Common failures and fixes
imgisnull: confirm the element exists when the code runs and that the ID matches exactly, including capitalization.getElementByIDerror: use the exact method spelling,getElementById, with a lowercasedinId.- Only one image changes: that is expected from an ID lookup. Use
querySelectorAll()and iterate for a group. - The new image does not appear: verify the path and filename, check the browser’s Network or Console panel, and confirm the server can serve that URL.
- Descriptions no longer match: revise
altwhen the replacement changes the image’s meaning.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
