Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

troy beckett
troy beckett
12,035 Points
Posted by troy beckett
troy beckett
12,035 Points

problem with image src

I've literally just asked this question but I asked it poorly and I really want to rewrite as I get the feeling its a serious problem.

I'm getting alot of trouble with my images at the moment.

Say I wanted to get a clicked images src:

I'd write $(this).attr('src');

which should return something like img/pic.jpg

well I'm getting something like:

http:/123.0.13:17568/img/pic.jpg

This is not only not stopping my code from working but also when I write the same code on a friends computer on one of his pics he doesn't get the numbers infront. Also I don't know what that problem is so I don't know where to look to fix it. Seems like a massive problem the more I think about it.

Andrew Gay
Andrew Gay
20,893 Points

Can you add some of the code regarding the context of $(this)

When I run $("img").attr('src') directly on an element I get back the src with none of the IP or port added to the beginning.

troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

thanks for you comment what I've got is a div with an image in it

so my code is

$(thumb-large img).click(function(){ $(this).attr('src'); });

really weird because when I search in google it doesn't seem a regular thing

Andrew Gay
Andrew Gay
20,893 Points

If it isn't solved by tonight ill keep looking into it more tomorrow! (Hope some one can help you figure this out)

troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

no worries I'm gonna have to keep trying to find a solution but I really appreciate that your trying to help me no worries if you can't

3 Answers

Andrew Gay
Andrew Gay
20,893 Points
Andrew Gay
Andrew Gay
20,893 Points 
$( document ).ready(function() {
  $(".thumb-large img").click(function() {
    alert( $(this).attr('src') );
  });
});

When I run that with the correct markup it only returns what is written in the src attribute of the img element within the elements with a .thumb-large class (Which in my case was a div)

So if you are referencing the direct path in the src attribute it would return what you have written there.

Try checking the html (or css, or however you store your stuff) and make sure the src is pointing to a relative path instead of the absolute path.

Example:

src="127.0.0.1:80/some.png"

would be similar to

src="/some.png"

Assuming the document is in the same path (Basically if the html file and img file reside in the same directory)

If this does not work please make a snapshot in workspaces for us to view or leave some more information!

Robert Mehew
Robert Mehew
2,427 Points
Robert Mehew
Robert Mehew
2,427 Points

If you use google inspector or firebug what is the SRC of the image in the markup? Without using JS.

troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

what do you mean by in markup without js?

I've got an image folder called img

the I've got images inside so one is dotted.jpg.

My html looks like this:

<div class="thumb-large">
  <img src="img/dotted.jpg" width="250px" height="250px">
</div>
Robert Mehew
Robert Mehew
2,427 Points
Robert Mehew
Robert Mehew
2,427 Points

if you do something like this, what appears:

alert(jQuery(".thumb-large img").prop("src"));
troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

firstly thanks a bunch for your help

When I put that code in I get something like this:

http://123.0.0.1234/img/dotted.jpg

Robert Mehew
Robert Mehew
2,427 Points
Robert Mehew
Robert Mehew
2,427 Points

It looks like your markup must have absolute paths. Are you using google chrome? You can right click on your image and click Inspect Element. Then in the window that shows at the bottom, you can see what the src="" looks like directly, live in the browser and not when editing.

troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

when I inspect element it shows on chrome it shows my html and my html is

src="img/dotted.jpg" i just don't know why its doing it.

Robert Mehew
Robert Mehew
2,427 Points
Robert Mehew
Robert Mehew
2,427 Points

Just testing this on js fiddle, this looks like the intended behaviour. It serves up the absolute path directly to the image. https://jsfiddle.net/kz0wkk1b/

troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

ok what would you advise i do thanks for your help so far

Robert Mehew
Robert Mehew
2,427 Points
Robert Mehew
Robert Mehew
2,427 Points

What is it your trying to achieve? You can use an absolute path to show an image elsewhere.

var newSrc = jQuery(".thumb-large img").prop("src");

jQuery(".new-thumb img").prop("src", newSrc);

You can do things like this to make the image show elsewhere, if that's what you need.

troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

whats confusing me is that to my knowledge I'm not using absolute paths.

I thought an absolute path would be like this in html:

src="http//www.gggg.com/image/white"

I have:

src="img/dotted.jpg"

So I'm thinking that is relative path. I have all the pictures stored in the img folder

Robert Mehew
Robert Mehew
2,427 Points
Robert Mehew
Robert Mehew
2,427 Points

jQuery retrieves an absolute path, does that not work for your needs?

Robert Mehew
Robert Mehew
2,427 Points
Robert Mehew
Robert Mehew
2,427 Points

Sorry, when I said markup I meant HTML (hyper text markup language).

I can't see your html :(