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

HTML

Img 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

I 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!

Thanks 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.

WAIT! I figured it out:) Yay!

Hmm 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. :)

Thanks 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:)

That'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.

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 :)