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 Build a Simple Website Text Editors and HTML Images and Lists

images not appearing in browser

my images are not showing in the browser..how do i specify where the files are?

Can you paste in your code?

5 Answers

David Lane
David Lane
33,414 Points

Check out Nick's blog post on this topic, very helpful. LINK

Also there is another forum topic on this issue that might solve your problem too. LINK

Philip Allen
Philip Allen
8,171 Points

Hello Becky

If you have website directory and within this parent directory you have both your html page and your image file then the html markup should look like this.

<img src="imagename.jpg">

If you want to keep your images together in a subdirectory called 'img' then your html should look like this.

<img src="img/imagename.jpg">

Hope this makes sense.

Hey guys Nick's link was really helpful...thank you!!

Hugh Mitchell
PLUS
Hugh Mitchell
Courses Plus Student 258 Points

I'm having this issue. I read the blog post which is great, but I'm still not getting something (that's probably obvious so forgive me).

It seems to be generally a no-no to link files from another website. Also not advised to link files from your own computer, as this won't work in anyone else's browser. So, wait, where DO you link them from? I understand the idea behind saying what the folder is, and then saying the name of the file within that folder, but where is this folder supposed to be?

I'm SUPER new to this, so apologies for asking dumb questions...

Philip Allen
Philip Allen
8,171 Points

Hi Hugh,

Linking from other websites can be unreliable and when it says do not link from your computer, it means do use a full path like file:///Users/Hugh/website/img/image.jpg this path is only correct on your PC.

When you use a relative path you can put the folder where ever you want when you are developing the site.

Lets say you have a website called myfirstsite. In your documents folder you could create a directory called 'websites' and within 'websites' you create another directory called my 'myfirstsite'. In the myfirstsite directory you place an index.html file and you place an image file called image01.jpg in another directory called 'img'. The full path on a Mac to your image would be file:///Users/Hugh/Documents/websites/myfirstsite/img/image01.jpg on a PC it could be something like C:\Documents and Settings\My Documents\website\myfirstsite\img\image01.jpg.

Because all your web files are within the same directory of myfirstsite you can use a relative path that starts from there. In your html file the relative path to your image is just img/image01.jpg . By using relative paths you can move your website directory to another location your html will still work.

Later as you get further in to web design and development you may need to run web server software such as Apache and the placement of your website directory becomes even more important as your web server will need to know where the files are but as long as the relative paths work on your site you only need to tell the web server the root directory location.

Hope this helps.

Hugh Mitchell
PLUS
Hugh Mitchell
Courses Plus Student 258 Points

Thanks Philip, that's very helpful. I'm slowly getting to grips with this!