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
Brittany Faust
192 PointsImg isn't showing up in browser
So I am very confused about why the image/logo won't show up in my browser. I know it has to do with how I have it saved on my computer for the path or whatever. My question is-How exactly should I save them? all in one folder with my index.html file?
6 Answers
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsI normally save all images in a folder called 'img' which I place in the same folder as index.html. Then I would link to the files in my html document using < img src="img/image1.jpg >
Sometimes you need to use 'relative paths' to point to the correct file location. Check out this article which should clear up any confusion.
Hope this helps!
Brittany Faust
192 PointsThanks James- But no matter how I save the image or what I name it and change the name in the code, it still won't show up. I have a folder on my desktop and in that folder I have another folder called img, which has the image in it called logo.gif but when I use logo.gif as the img src it won't show up.
The only way it works is if I paste in this as the img src
http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/logo.gif
which I just happened upon in another forum. It makes the logo show up in the browser but I really have no idea why/how.
Brittany Faust
192 PointsWAIT! I figured it out:) Yay!
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHmm using < img src="img/logo.gif" > should work in this case. Are you trying to link to an image from a css file that is in a separate css folder? If so you'd need to use a relative filepath such as img src="../img/logo.gif" (more info on relative filepaths can be found at the link I posted above)
Can you post your code so I can take a closer look?
EDIT: Beat me too it, good to hear its working. :)
Brittany Faust
192 PointsThanks for your help James!
I figured it out through trial and error. This is my first experience with html, so the article you provided was a bit over my head. However, I found I just needed to add the name of my folder before img/logo.gif so I changed the code to this
img src="name of my folder/img/logo.gif"
and that worked:)
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsThat's one way of doing it and its fine to do it that way for now, but the only problem is if you wanted to move your site somewhere else (such as to a different folder on your computer or upload it to a server) your image would stop working. Also as you go through the web design track on treehouse and start using CSS (in particular adding images using CSS), you will run into this problem again. The way to get around it is to use relative filepaths.
It can be pretty hard to understand at first, but try these tutorials which explain it far better than I can.
- absolute-vs-relative-paths - coffeecup.com
- absolute and relative paths - webdesign.about.com
- paths-and-urls-relative-and-absolute -jeffreybarke.net
- reminder about filepaths - css-tricks.com
I don't want to overwhelm you with information as I'm sure you've got enough to learn already! But its definitely an important concept to understand. So don't worry about it too much for now, but read up on it sooner rather than later to avoid running into the same problem you've just had again.
Hope this helps and don't hesitate to ask if you have any more questions :)