jQuery get the image src
JqueryJquery Problem Overview
I hope when I click the button, I can get the specific img src and show the img src in the div class img-block
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 face the problem is to get the img src.
So I use alert to make the test, the result is it alert nothing.
Jquery Solutions
Solution 1 - Jquery
src should be in quotes:
$('.img1 img').attr('src');
Solution 2 - Jquery
for full url use
$('#imageContainerId').prop('src')
for relative image url use
$('#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' />
Solution 3 - Jquery
You may find likr
$('.class').find('tag').attr('src');
Solution 4 - Jquery
When dealing with the HTML DOM (ie. this
), the array selector [0]
must be used to retrieve the jQuery element from the Javascript array.
$(this)[0].getAttribute('src');
Solution 5 - Jquery
This is what you need
$('img').context.currentSrc
Solution 6 - Jquery
In my case this format worked on latest version of jQuery:
$('img#post_image_preview').src;
Solution 7 - Jquery
html :
<img id="img_path_" width="24" height="24" src=".." class="img-fluid" alt=“">
js:
$('#img_path_').attr('src')