How to Change the Image Source Using jQuery

Probably, the best method to change the image sources is jQuery's attr() function.

For example, let’s assume your <img> tag has an id attribute of 'your-image', so you can act like this:

Javascript image attribute

<img id="your-image" src="image1.jpg"/>

Next, you can change the src of your image with jQuery. The code below first selects the desired image element by its tag and manipulates the src attribute of the image element.

Javascript jquery image attribute change source

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 300px;
        height: 200px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <div class="imgDiv">
      <img id="your-image" src="https://ru.w3docs.com/uploads/media/default/0001/05/2c669e35c4c5867094de4bed65034d0cac696df5.png" alt="JS" />
    </div>
    <script>
      $(document).ready(function() {
          $("img").click(function() {
              // Change src attribute of image
              $("#your-image").attr("src", "https://www.w3docs.com/uploads/media/default/0001/05/9eb9e9cba721ba3bb5e653751449173197f2924a.png");
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

To attach the given code piece to a click event, you can do the following code which is similar to the one above, but this time instead of manipulating the src attribute, we simply add a function as the click event handler:

Javascript jquery image attribute click and change source

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 300px;
        height: 200px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js">
    </script>
  </head>
  <body>
    <div class="imgDiv">
      <img id="your-image" src="https://ru.w3docs.com/uploads/media/default/0001/05/2c669e35c4c5867094de4bed65034d0cac696df5.png" alt="JS" />
    </div>
    <script>
      $(document).ready(function() {
          $('#your-image').on({
              'click': function() {
                $('#your-image').attr('src', "https://www.w3docs.com/uploads/media/default/0001/05/9eb9e9cba721ba3bb5e653751449173197f2924a.png");
              }
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

To change the image, you can act as follows:

Javascript jquery click and change the image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 300px;
        height: 200px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js">
    </script>
  </head>
  <body>
    <div class="imgDiv">
      <img id="your-image" src='https://ru.w3docs.com/uploads/media/book_gallery/0001/02/c8d75681dcd87da6f7d8ebfa0cdb40cbb403bed8.png' alt="Image" />
    </div>
    <script>
      $(document).ready(function() {
          $('img').on({
              'click': function() {
                let src = ($(this).attr('src') === 'https://ru.w3docs.com/uploads/media/book_gallery/0001/02/c8d75681dcd87da6f7d8ebfa0cdb40cbb403bed8.png') ?
                  'https://www.w3docs.com/uploads/media/book_gallery/0001/02/c4ba86c634f0f9c7ea055964c7f7436bab2bb698.png' :
                  'https://ru.w3docs.com/uploads/media/book_gallery/0001/02/c8d75681dcd87da6f7d8ebfa0cdb40cbb403bed8.png';
                $(this).attr('src', src);
              }
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

The attr() Method

The <kbd class="highlighted">.attr()</kbd> method is used to get the attribute value for only the first element in the matched set. To get the value for each element separately, you can use a looping construct such as the <kbd class="highlighted">.each()</kbd> or <kbd class="highlighted">.map()</kbd> method.