How to get an img url using jQuery?

Question

Is it possible to get the actual URL (as opposed to the src attribute value) of an image within the current DOM using jQuery or JavaScript?

ie retrieve "example.com/foo.jpg" as opposed to "foo.jpg" (taking <base> elements into account)

What about any other interesting properties such as the mime type, file size or, best of all, the actual binary data?

Answer 1

I wonder if jQuery is using .getAttribute() - using .src always seems to give the absolute URL:

<img src="foo.jpg" id="i">

<script>
var img = document.getElementById('i');

alert(img.getAttribute('src')); // foo.jpg
alert(img.src);                 // http://..../foo.jpg
</script>

To get the rest of the information, could you use an AJAX request and look at the header & data sent?

Answer 2

$(you IMG selector).attr('src');

for instance, if we have an <img src='bla-bla.jpg' id='my_img'>

then we'll do:

$('#my_img').attr('src');

Answer 3

simple

$("#my_img").src;

just it resolve the problem

Answer 4

var img = $('img');
alert(img.attr('src')); // foo.jpg
var fullpath = window.location.host + img.attr('src');
alert(fullpath); // http://example.com/foo.jpg