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 trialtroy beckett
12,035 Pointsproblem 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.
troy beckett
12,035 Pointsthanks 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
20,893 PointsIf it isn't solved by tonight ill keep looking into it more tomorrow! (Hope some one can help you figure this out)
troy beckett
12,035 Pointsno 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
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
2,427 PointsIf you use google inspector or firebug what is the SRC of the image in the markup? Without using JS.
troy beckett
12,035 Pointswhat 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
2,427 Pointsif you do something like this, what appears:
alert(jQuery(".thumb-large img").prop("src"));
troy beckett
12,035 Pointsfirstly thanks a bunch for your help
When I put that code in I get something like this:
Robert Mehew
2,427 PointsIt 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
12,035 Pointswhen 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
2,427 PointsJust 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
12,035 Pointsok what would you advise i do thanks for your help so far
Robert Mehew
2,427 PointsWhat 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
12,035 Pointswhats 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
2,427 PointsjQuery retrieves an absolute path, does that not work for your needs?
Robert Mehew
2,427 PointsSorry, when I said markup I meant HTML (hyper text markup language).
I can't see your html :(
Andrew Gay
20,893 PointsAndrew Gay
20,893 PointsCan 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.