jQuery Get and Set Image Src Example

To get the image src and set the image src using jQuery attr(). In this tutorial, you will learn how to get and set the image src using jQuery.

jQuery Get and Set Image Src Example

The attr() method to get and change the image source in jQuery.

Get Image Src

Here is the syntax to get image src in jQuery:

        $(document).ready(function() {

            $('.btn').click(function(){

                $imgsrc = $('img').attr('src');
                alert($imgsrc);

            });

         });

Set the Image Src

Here is the syntax to set image src in jQuery:

     $(document).ready(function() {

         $('.btn').click(function(){

            $("img").attr("src",'test.png');

         });

     });

Here is an example of dynamically set and get image src in jquery:

<html>

   <head>

      <title> How to get and set image src attribute example</title>

      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   

      <script>

         $(document).ready(function() {

            $('.btn').click(function(){

                $imgsrc = $('#first').attr('src');
                $("#second").attr("src",$imgsrc);

            });

         });

      </script>
      <style>
        .card{
            margin: 30px;
        }
     </style>
   </head>

   <body>

    <div class="card">
        <img src="//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Encode-Decode-a-URL-Using-JavaScript.jpeg" width="100" id="first" alt="Poker Card">
    </div>


    <div class="card">
        <img src="//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Download-Install-XAMPP-on-Windows.jpeg" width="100" id="second" alt="Poker Card">
    </div>

   <button type="type" class="btn">Get & Set image src</button>


   </body>

</html>

In the above example, we have got the first image src and set the src to the second image.

Conclusion

In this article, you have learned how to get the image tag src and set the image tag src using jQuery attr() with example.

jQuery Get and Set Image Src Example