How do I get the 'src' attribute from an image tag?

Question

I have the following HTML and I am trying to get the img src attribute:

<span id="firstSpan"><img src="https://mydomain.xyz/imgs/image.jpg" alt="Image Thumbnail" width="48px" height="62px"></span>

Here is how I am attempting to get the url after I have the current object pointing to <img ...' :

$(this).attr('src')

for some reason I get the 'undefined' value

that code looks fine, when are you calling it? Maybe $(this) is not the img tag. — IrkenInvader, Jan 14 '16 at 16:15
What is your context, are you running this inside of an onclick or is this just right in the middle of nowhere ? (if that wre the case the value if this would be window whch does not have a src attribute) — dovidweisz, Jan 14 '16 at 16:16
@IrkenInvaderl pretty sure $(this) is the img tag, because when I log to the console [console.log($(this).html()) i get back the img tag — Shaun, Jan 14 '16 at 16:19
If you get the img tag with `$(this).html()` then you are attempting to get the `src` attribute from the parent, not from the img. Try with `$(this).parent().attr('src')` and sure it works — Marcos Pérez Gude, Jan 14 '16 at 16:21
@MarcosPérezGude is right, but you wouldn't select the `parent()`, the img is a child so it'd be `$(this).find("img").attr("src")` — CodingIntrigue, Jan 14 '16 at 16:34
Yes, sorry @RGraham , my mistake. I'm write with hurry up and i'm mistaken — Marcos Pérez Gude, Jan 14 '16 at 16:36

score 2 · Answer 1 · answered Jan 14 '16 at 16:21

placing the code after the img element:

var src = jQuery('#firstSpan').children('img').attr('src');

before:

$(document).ready(function() {
    var src = jQuery('#firstSpan').children('img').attr('src');
})

For performance reasons, it could be better to assign a class or an id to the img tag and use it to get the element instead of the children function

score 1 · Answer 2 · answered Feb 16 '17 at 14:43

1

<span id="firstSpan"><img id='myimage'src="https://mydomain.xyz/imgs/image.jpg" alt="Image Thumbnail" width="48px" height="62px"></span>

 var value = document.getElementById('myimage').src;

answered Feb 16 '17 at 14:43

Moses Kirathe

132
1
2
14

score 0 · Answer 3 · answered Jan 14 '16 at 16:19

I suspect "this" is not actually targeting the image, but rather the span on click. Try this:

HTML:

<span id="firstSpan"><img class="foo" 
src="https://mydomain.xyz/imgs/image.jpg" alt="Image Thumbnail" width="48px" height="62px"></span>

JS:

var source =  $(".foo").attr('src');
console.log(source);

score 0 · Answer 4 · answered Jan 14 '16 at 16:23

Try:

$(document).ready(function(e) { $("#firstSpan img").attr("src"); });.

You can also do alert($("#firstSpan img").attr("src")) or console.log($("#firstSpan img").attr("src")) to see if your code is actually being called as well, or debug it directly through your chosen browsers developments tools.

Chrome Developer Tool

Firefox Development Tool

Internet Explorer/Edge Developer Tool

Safari Developer Tool

How do I get the 'src' attribute from an image tag?

4 Answers4