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:

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

Next, you can change the src of your image with jQuery like this:

<!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.5.0.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>

To attach the give code piece to a click event, you can do the following:

<!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.5.0.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>

To change the image, you can act as follows:

<!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.5.0.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>

The attr() Method

The .attr() 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 .each() or .map() method.

Do you find this helpful?

Related articles