jQuery Get and Set Image Src Example

jQuery Get and Set Image Src Example

Overview

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

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

Get Image Src

Use the below script to get image src.

        $(document).ready(function() {

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

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

            });

         });

Set the Image Src

Use the below script to set the image src.

     $(document).ready(function() {

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

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

         });

     });

Let’s take an example

The following example will change the second image to the first image.

<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 &amp; 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.

You may like

  1. How to Get the Current Page URL in jQuery
  2. jQuery Ajax Get() Method Example
  3. get radio button checked value jquery by id, name, class
  4. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  5. jQuery Get Data Text, Id, Attribute Value By Example
  6. Set data attribute value jquery
  7. select multiple class in jquery
  8. How to Remove Attribute Of Html Elements In jQuery
  9. How to Checked Unchecked Checkbox Using jQuery
  10. jQuery removeClass & addClass On Button Click By E.g.

Leave a Reply

Your email address will not be published. Required fields are marked *