How to Change Image Source in JavaScript

Use the src property when an image should update based on clicks, user choices, API data, or slideshow timing. This is the standard way to swap product images, profile photos, banners, and galleries without reloading the page.

What you’ll build or solve

You’ll learn how to change image source in JavaScript using the src property. You’ll also know how to update related alt text and avoid broken image paths.

When this approach works best

This approach is the right choice when the same image element should display different files over time.

Common real-world scenarios include:

• Product image galleries
• Theme-based logos
• Profile photo updates
• Slideshow banners
• Thumbnail previews

This is a bad idea when the image element itself should be fully replaced with a different layout structure. In that case, create a new element instead.

Prerequisites

You only need:

• A basic HTML page with an <img>
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Select the image and update src

Start by selecting the image element.

<img class="hero-image" src="default.jpg" alt="Default banner">

<script>
  const heroImage = document.querySelector(".hero-image");
  heroImage.src = "updated-banner.jpg";
</script>

Update the alt text at the same time so the image stays accessible.

heroImage.alt = "Updated banner";

A common use case is changing the image after a click.

document.querySelector(".thumbnail").addEventListener("click", () => {
  heroImage.src = "product-2.jpg";
});

What to look for:

• src updates the displayed file immediately
• Always keep alt text aligned with the new image
• Great for galleries and previews
• Use valid relative or absolute paths
• Broken paths show the browser’s missing image icon

Examples you can copy

Swap product image

const product = document.querySelector(".product-image");
product.src = "keyboard-black.jpg";

Change profile photo

const avatar = document.querySelector(".avatar");
avatar.src = "new-avatar.png";

Update logo for dark mode

const logo = document.querySelector(".logo");
logo.src = "logo-dark.svg";

Common mistakes and how to fix them

Mistake 1: Changing the wrong property

What the reader might do:

image.href = "photo.jpg";

Why it breaks: images use src, not href.

Corrected approach:

image.src = "photo.jpg";

Mistake 2: Broken file path

What the reader might do:

image.src = "images/photo";

Why it breaks: missing file extension or wrong folder path causes a broken image.

Corrected approach:

image.src = "images/photo.jpg";

Mistake 3: Forgetting to update alt text

What the reader might do:

avatar.src = "team-photo.jpg";

Why it breaks: the alt text may no longer describe the new image.

Corrected approach:

avatar.src = "team-photo.jpg";
avatar.alt = "Team photo";

Troubleshooting

If the image does not change, confirm the selector matches the correct <img>.

If the image icon breaks, recheck the file path and extension.

If accessibility text becomes outdated, update alt with the new content.

If thumbnails control the wrong image, verify the event targets the correct main image.

Quick recap

• Select the <img> first
• Update the src property
• Keep alt text in sync
• Use correct file paths
• Great for galleries, previews, and slideshows