Last updated on

If you want to dynamically update an image on your page you can use the jQuery change image src technique to select a new image.

You’ve probably done a bit of work with HTML before if you’re reading this and you’ll have come across the <img> tag and how you set the src attribute to point to the file location of the image you want to load.  So you’ll have something like this in your page:

<img id="logo" src="/images/logo.jpg">

You might want to display a different image to the user, maybe if they click a button or perform another action.

We can use jQuery to change the image.

The jQuery change image src technique

The way it works is like this:

It’s dead simple really.

We’ll use the jQuery attr function to change the source attribute.  Here’s a quick example:

$(function(){
  $('#logo').attr('src', '/images/new-logo.jpg');
});

The above code will change the image for the element with an id of logo and by setting the src attribute to images/new-logo.jpg as soon as the document has loaded.

Of course, you probably don’t want to change the image straight away when the page loads (why not just set it in the img tag in the first place right?).

Changing the image on the click of a button

Probably a better use case is changing the image based on some action the user performs.

Let’s take a look at changing the image on the press of a button.

$(function(){
  $('#login').on('click', function(){
    // Perform some login actions...
    // ...
    // Then update the login status image
    $('#login-state').attr('src', 'images/loggedin.png');
  });
});

It’s a bit out of context but you can image that the above snippet could form part of a login process.

When the user clicks the button with the id of login some login function is performed and then an img tag with the id of login-state is updated to show that the user is now logged in.

Note: There’s a lot missing from this example, e.g. what happens if the login fails etc. but it demonstrates how you might have a need to dynamically update an image in a real-world scenario.

Conclusion

To update images on a web page dynamically with jQuery it’s as simple as using the attr function.

Using this you can modify the src attribute of <img> tags (or indeed any other attribute of any other tag!) to change the location of the image that is loaded.

Enjoy creating something dynamic and awesome with this technique!