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 How to Make a Website Creating HTML Content Structure the Image Gallery

Laurel Adams
Laurel Adams
916 Points
Posted by Laurel Adams
Laurel Adams
916 Points

Index of/ image not showing up.

I'm not sure why I am getting this message? It provides a link to img, but all that shows up is the text and no image. I went carefully through the code and my file names, and tried it in firefox, chrome and IE. Any idea what I'm doing wrong?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Laurel Adams | Designer</title> </head> <body> <header> <a href="index.html"> <h1>Laurel Adams</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <img src="img/numbers-01.jpg" alt=""> </li> </ul> </section> <footer> <p>Ā© 2015 Laurel Adams.</p> </footer> </body> </html>

5 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi Laurel,

Your code looks fine so it may be to do with the folder structure / image itself. Can you try the following to be sure please?

  • Right click on the image (or lack of image) in the browser and check the path displayed. Does that match the location of your image?
  • Check the case of the folder / filename. It may not display if the path is img but the folder is named IMG for example.
  • Check the file extension to make sure it should be .jpg.
  • Finally check the name matches.

Hope that helps in some way.

-Rich

Laurel Adams
Laurel Adams
916 Points
Laurel Adams
Laurel Adams
916 Points

Thank you for the tips! I went through everything you mentioned- path is the same, filenames match and and are all .jpg. So confused :(

Rich Bagley
Rich Bagley
25,869 Points

Hmm, it's an odd one. Are you viewing this in Workspaces or on your machine locally?

Rich Bagley
Rich Bagley
25,869 Points

This isn't guaranteed to work but can you try adding a slash to the beginning of your image path please? e.g.

<img src="/img/numbers-01.jpg" alt="">

Does it make any difference?

-Rich

Laurel Adams
Laurel Adams
916 Points
Laurel Adams
Laurel Adams
916 Points

I tried it, but no difference:(

Rich Bagley
Rich Bagley
25,869 Points

Wow, completely lost on this one then I'm afraid.

Just to confirm, there's definitely an image named numbers-01.jpg inside a folder called img that's directly from the root (and not in any sub folders) and all the casing is the same as the html path?

If that all seems correct I'm really struggling for an answer here :)

-Rich

Laurel Adams
Laurel Adams
916 Points
Laurel Adams
Laurel Adams
916 Points

Yes, there is an image named numbers-01.jpg inside the folder img. However, the img folder is a sub folder of the index.html folder( but it has to be,right?). I'm not quite sure what you mean by the casing being the same as the html path? Such a newbie,lol.

Rich Bagley
Rich Bagley
25,869 Points

Hi Laurel,

Don't worry, I'm probably not explaining very well.

In terms of casing I mean for example if the image folder was named Img (capital 'I') and your path uses img (lower case 'i'). I don't think it's that though now.

For your folder structure do you have something like the following?

  • index.html (file)
  • img (folder) - numbers-01.jpg (image inside 'img' folder)

If it looks more like this it could be where the issue is:

  • img (folder) - index.html (file inside 'img' folder) - numbers-01.jpg (image inside 'img' folder)

The index.html and the img folder should be effectively on the same level. The only thing inside the img folder should be the numbers-01.jpg image and not the index.html.

Hope that makes some kind of sense :)

-Rich

Rich Bagley
Rich Bagley
25,869 Points

Just thought, the easiest way to test the theory above is to change the path to the following:

<img src="numbers-01.jpg" alt="">

Does the image show up?

If so, it means that you have your index.html inside your img folder. It will need moving outside for the original code to work.

-Rich

Laurel Adams
Laurel Adams
916 Points
Laurel Adams
Laurel Adams
916 Points

Well, in my efforts to rearrange the folders, I went and deleted my entire path.... ><! Soon as I get it built back up, I will check back in to let you know if you hat was the problem. Thanks for all your help so far!!!

Rich Bagley
Rich Bagley
25,869 Points

No problem, sorry it's taking so long to debug. It's not usually this long of a process :) Let us know how you get on anyway.

-Rich

Laurel Adams
Laurel Adams
916 Points
Laurel Adams
Laurel Adams
916 Points

You were right! Had the index folder inside the image folder. It's working now:) Thanks so much for your help!

Rich Bagley
Rich Bagley
25,869 Points

No problem. Glad you managed to sort it :)

-Rich

brettyoshimitsu
brettyoshimitsu
Courses Plus Student 586 Points

for some reason when I deleted the img folder completely with all images inside and re-uploaded only the numbers-01.jpg by itself and created the img folder, the image showed up in the preview.

Ex:

(folder icon)How to make a W...

(folder icon)img

                numbers-01.jpg

index.html

not sure why this worked for me.

Andrew Wiley
Andrew Wiley
27,097 Points
Andrew Wiley
Andrew Wiley
27,097 Points

I had trouble with this as well. But I think I have the answer to this problem for everybody.

Make sure if you use an uppercase for the Img folder then you MUST put it uppercase as well in the workspace.

Or if you spelled out images for the folder then you have to make sure you put images in the workspace.

<img src="Img/numbers-01.jpg" alt="">

<img src="images/numbers-01.jpg" alt="">

Kofi Owusu Acheampong
Kofi Owusu Acheampong
20,320 Points
Kofi Owusu Acheampong
Kofi Owusu Acheampong
20,320 Points

Hi Laurel, you may want to make sure that the file path to the image is correct in your folders associated with your work.

Laurel Adams
Laurel Adams
916 Points
Laurel Adams
Laurel Adams
916 Points

Checked, and they should all be correct :/

Kofi Owusu Acheampong
Kofi Owusu Acheampong
20,320 Points
Kofi Owusu Acheampong
Kofi Owusu Acheampong
20,320 Points

I do not know if that is all the code you have. It might not make that much of a difference but make sure to have the !DOCTYPE and html tags at the top of the page. I do not see them in the code you have provided.

Kofi Owusu Acheampong
Kofi Owusu Acheampong
20,320 Points
Kofi Owusu Acheampong
Kofi Owusu Acheampong
20,320 Points

And also, the title tags are supposed to be nested in a head tag

Laurel Adams
Laurel Adams
916 Points
Laurel Adams
Laurel Adams
916 Points

There is a !DOCTYPE and html tags, they don't appear when I copy and paste for some reason. Same problem with the head tags, but are correct in my Workspaces.