jQuery get the image src

Question

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.

Stuart Kershaw · Accepted Answer · 2013-11-12 18:33:02Z

270

src should be in quotes:

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

answered Nov 12, 2013 at 18:33

Stuart Kershaw

17.8k6 gold badges39 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VolkanCetinkaya Dec 8, 2024 at 19:18

$('.img1 img') is return an array. Becuse you must use index. for example; $('.img1 img')[0].attr('src'). It would be better if you check the number of elements beforehand. For example; var elems = $('.img1 img'); if (elems.length > 0) { alert($(elems)[0].attr('src'); }

noone · Accepted Answer · 2018-11-21 12:05:47Z

14

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' />

answered Nov 21, 2018 at 12:05

noone

6,5782 gold badges48 silver badges54 bronze badges

Comments

parth-BSP · Accepted Answer · 2017-04-27 07:36:00Z

8

You may find likr

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

answered Apr 27, 2017 at 7:36

parth-BSP

1241 silver badge2 bronze badges

Comments

Jacob · Accepted Answer · 2020-11-17 22:28:21Z

3

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');

answered Nov 17, 2020 at 22:28

Jacob

1871 silver badge8 bronze badges

Comments

Ayse · Accepted Answer · 2021-08-09 12:56:51Z

3

html :

<img id="img_path_" width="24" height="24" src=".." class="img-fluid" alt=“">

js:

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

answered Aug 9, 2021 at 12:56

Ayse

1,1609 silver badges16 bronze badges

Comments

Nezir · Accepted Answer · 2019-05-14 22:09:47Z

2

In my case this format worked on latest version of jQuery:

$('img#post_image_preview').src;

answered May 14, 2019 at 22:09

Nezir

6,93312 gold badges59 silver badges84 bronze badges

Comments

suzuko · Accepted Answer · 2017-07-08 02:58:19Z

1

This is what you need

 $('img').context.currentSrc

answered Jul 8, 2017 at 2:58

suzuko

111 bronze badge

Comments

Samir Karmacharya · Accepted Answer · 2022-10-21 05:43:58Z

0

jQuery(document).ready(function($){
                $('body').on('click','.button',function(){              
                    var imgsrc=$('.img1 img').attr('src');              
                    $(".img-block").append(imgsrc);
                })
            });

answered Oct 21, 2022 at 5:43

Samir Karmacharya

9008 silver badges23 bronze badges

Collectives™ on Stack Overflow

jQuery get the image src

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related