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 trialLaurel Adams
916 PointsIndex 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
25,869 PointsHi 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
Andrew Wiley
27,097 PointsI 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
20,320 PointsHi 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
916 PointsChecked, and they should all be correct :/
Kofi Owusu Acheampong
20,320 PointsI 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
20,320 PointsAnd also, the title tags are supposed to be nested in a head tag
Laurel Adams
916 PointsThere 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.
Laurel Adams
916 PointsLaurel Adams
916 PointsThank 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
25,869 PointsRich Bagley
25,869 PointsHmm, it's an odd one. Are you viewing this in Workspaces or on your machine locally?
Laurel Adams
916 PointsLaurel Adams
916 PointsIn workspace.
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsThis 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
916 PointsLaurel Adams
916 PointsI tried it, but no difference:(
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsWow, 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
916 PointsLaurel Adams
916 PointsYes, 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.
Laurel Adams
916 PointsLaurel Adams
916 PointsThis is what it looks like: http://port-80-l6biffa3wo.treehouse-app.com/
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsHi 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?
If it looks more like this it could be where the issue is:
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
25,869 PointsRich Bagley
25,869 PointsJust 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
916 PointsLaurel Adams
916 PointsWell, 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
25,869 PointsRich Bagley
25,869 PointsNo 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
916 PointsLaurel Adams
916 PointsYou were right! Had the index folder inside the image folder. It's working now:) Thanks so much for your help!
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsNo problem. Glad you managed to sort it :)
-Rich
brettyoshimitsu
Courses Plus Student 586 Pointsbrettyoshimitsu
Courses Plus Student 586 Pointsfor 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.