JQuery get src image

Question

Hopefully when I click the button I can get the specific img src and show img src in the img-block div img-block .

HTML

 <button class="button">Click</button> <div class="img1"> <img src="img.jpg" alt=""> </div> <div class="img-block"></div> 

CSS

 .img-block{ position: absolute; top:10%; right:10%; background-color: red; width: 500px; height: 500px; } .img1 img{ width: 200px; } 

Js

 $('.button').click(function(){ var images = $('.img1 img').attr(src); alert(images); }); 

But now I am facing a problem - get img src.
Therefore, I use a warning to conduct the test, as a result, it does not warn anything.

Answer 1

src must be in quotation marks:

 $('.img1 img').attr('src'); 

Answer 2

You can find likr

 $('.class').find('tag').attr('src'); 

Answer 3

This is what you need

  $('img').context.currentSrc 

Answer 4

for full use of the URL

 $('#imageContainerId').prop('src') 

to use relative image URL

 $('#imageContainerId').attr('src') 

 function showImgUrl(){ console.log('for full image url ' + $('#imageId').prop('src') ); console.log('for relative image url ' + $('#imageId').attr('src')); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id='imageId' src='images/image1.jpg' height='50px' width='50px'/> <input type='button' onclick='showImgUrl()' value='click to see the url of the img' /> 

Answer 5

In my case, this format worked on the latest jQuery version:

 $('img#post_image_preview').src; 

Answer 6

To get the current image source with a click and display this image in a different location;

 <script type="text/javascript"> jQuery(document).ready(function($){ $('body').on('click','img',function(){ var imgsrc=$(this).attr('src'); $("html").append("<div id='image_popup'><img src='"+imgsrc+"'></div>"); }) }); </script>