Get Image SRC Value Using Jquery

Many times we need our image URL for performing some actions like zooming, changing or providing effects. In this tutorial we will get the Image SRC value using Jquery. In this tutorial we will divide the code into 2 parts. “HTML and JQUERY”.

Index.html

<img src="logo/logo.png" id="logo">
 <input type="button" id="bt" name="bt" value="Click Me">
 <p id="name" style="display:none"></p>

In the above example we have added 3 things to our page.

1. Image – To show the image and taking the src of it.
2. Button – For performing click event using button.
3. P tag – To show the src value of the image tag.

Jquery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
   $('#bt').click(function (){
       var image=$('#logo').attr("src");
       $('#name').fadeIn(1000);
       $('#name').html(image);
   });
</script>

In the above code 1st line is used for getting the Jquery library reference. Our function will work on when someone click on ‘button’ than our image variable will get the value of the src attribute. Our last line will show the image to the P tag.

Hope you will understand the tutorial if you have any queries or doubt please comment below.