Getting relative image src with jQuery

Question

I've got image tags that look like this:

<img src="/path/to/my/image.jpg" />

But when I access the src bit using jQuery, jQuery gives me back:

http://example.com/path/to/my/image.jpg

This is causing problems in some comparisons I'm doing. I don't want to change my image paths to use absolute URLs.

Any ideas as to how I can either get the absolute URL from the image path (this might not be as simple as concatenating the domain - since the URLs may occasionally be absolute), or get the path I provided in the HTML? Either way I need them to match up.

Edit per comment from activa

There's not really a lot of jQuery code to post, I'm using the cycle plugin, and in the onbefore function, I'm just calling next.src. My jQuery and JavaScript foo isn't sufficient to really understand what the cycle plugin is doing to generate next - I think it's the DOM element for the next image being cycled in, if you're familiar with what cycle does.

My image tag is actually this:

<img src="/site_media/photologue/photos/cache/6927d406810ee9750a754606dcb61d28.jpg" alt="" class="landscape slideshow-image-1" />

and in my onbefore function this code:

alert(next.src);

results in an alert with:

http://127.0.0.1:8000/site_media/photologue/photos/cache/6927d406810ee9750a754606dcb61d28.jpg

Can you post the jQuery code you are using to retrieve the src attribute? Because this doesn't seem right. As Mario pointed out below, the src attribute will not be modified by jQuery — Philippe Leybaert
– Philippe Leybaert, Commented Jun 4, 2009 at 7:23
In my case I actually wanted the absolute URL, so I just did what were doing before you fixed it. Awesome :) — William Denniss
– William Denniss, Commented Aug 28, 2011 at 5:41

Mario Menger · Accepted Answer · 2009-06-04 08:24:35Z

18

$("img").attr("src") gives back the actual value of the src attribute (tried in FF3 and IE7)

So when you have

<img src="http://example.com/path/to/my/image.jpg" />

it will return

http://example.com/path/to/my/image.jpg

And when you have

<img src="/path/to/my/image.jpg" />

it will return

/path/to/my/image.jpg

Edit after edit of question

Sounds like you may want to try

$(next).attr("src")

edited Jun 4, 2009 at 8:24

answered Jun 4, 2009 at 7:02

Mario Menger

5,9022 gold badges30 silver badges31 bronze badges

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

Comments

balexandre · Accepted Answer · 2009-06-04 07:07:41Z

1

why don't you strip it?

var hostname = 'http://' + window.location.hostname;

it will assing to hostname

http://example.com

then refactor your variable like

if( imgSrc == imgSrc2 ) ...

to

if( ImgSource(imgSrc) == imgSrc2 ) ...

using

function ImgSource(path) {
    return hostname + path;
}

or the other way arround

function ImgSource(path) {
    return path.replace(hostname, '');
}

answered Jun 4, 2009 at 7:07

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

1 Comment

Wessam El Mahdy Over a year ago

If you are testing on local machine you should use window.location.host to get the port number attached to the hostname.

Matthew Flaschen · Accepted Answer · 2009-06-04 07:23:15Z

1

To always get the full resolved path, use Element.src , not Element.getAttribute("src") (which seems to be the equivalent of attr("src")).

E.g.:

document.getElementsByTagName("img")[0].src

rather than:

document.getElementsByTagName("img")[0].getAttribute("src")

. I'll let you jqueryify .src.

answered Jun 4, 2009 at 7:23

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

Comments

Mark · Accepted Answer · 2012-04-25 19:09:54Z

0

I have this happening on a page loaded via Ajax on a server that seems to be .NET based. Even though the path is relative its returning the full URL even though in all other browsers it works fine. Only happening in IE 8. I can't strip off based on a domain since there are several environments for the project I'm working on.

I'll report back if I find anything better than just splitting or regex replacement.

answered Apr 25, 2012 at 19:09

Mark

2,55920 silver badges20 bronze badges

Collectives™ on Stack Overflow

Getting relative image src with jQuery

Edit per comment from activa

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit per comment from activa

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related