JQuery Get and Set Image Src Example

jquery get set image src

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="//image-name-with-source.jpeg" width="100" id="first" alt="Poker Card">
    </div>
 
 
    <div class="card">
        <img src="//image-name-with-source.jpeg" width="100" id="second" alt="Poker Card">
    </div>
 
   <button type="type" class="btn">Get &amp; Set image src</button>
 
 
   </body>
 
</html>

Check This Also

Difference between AngularJS and Angular 2 Make a Mobile app in just 10 minutes With Ionic Framework Angular 9: What to Expect in New Version of Angular Alert (Toaster) Notifications in Angular 8