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

Images not displaying in Workspace

Having downloaded a project file for the images it contains, expanded them and then dropped said images from Finder into Workspace, they do not display when I preview the index.html file in the my browser (Google Chrome).

Any ideas?

John Donnell
John Donnell
7,801 Points

If you copy and paste your html and css here i'm sure someone can help you.

3 Answers

Grigor Penev
Grigor Penev
3,780 Points

Well there are a few things to look out when linking images:

1)Make sure the image name that you are linking to is spelled correctly 2)Make sure that you include the directory of the images.

ex: /<img src="IMG/name of image.jpg">/

where IMG is the name of the folder that you keep your images in.

3)Make sure that the CSS code is not the source of the problem

Try adding them without any CSS applied.

If nothing helps post a picture of your code so we can have a look at it.All abouve are just assumptions :)

idan ben yair
idan ben yair
10,288 Points

Hi, John is right we will need to see your code :)

here is my code images are not displaying when i run the preview, images name are correct as in img folder

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Supermacks</title> </head> <body> <header> <a href="index.html"> <h1>All You Can Eat</h1> <h2>Choose from Menu</h2> </a> <nav> <ul> <li><a href="supermacksmenu.html">Supermacks</a></li> <li><a href="breakfast.html">Break Fast</a></li> <li><a href="burgermeals.html">Burger Meal</a></li> <li><a href="snackbox.html">Snack Box</a></li> <li><a href="fries.html">Tyco Fries</a></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/SupermacksMenu.jpg"> <img src="img/SupermacksMenu.jpg" alt=""> <p>SuperMacks Menus.</p> </a> </li> <li> <a href="img/Breakfast.jpg"> <img src="img/Breakfastu.jpg" alt=""> <p>Breakfast Meals.</p> </a> </li> <li> <a href="img/BurgerMeal.jpg"> <img src="img/BurgerMeal.jpg" alt=""> <p>Burger Meals.</p> </a> </li> <li> <a href="img/SnackBox.jpg"> <img src="img/SnackBox.jpg" alt=""> <p>Snackbox Meals.</p> </a> </li> </ul> </section> <footer> <p>Ā© 2015 used car parts.</p> </footer> </body> </html>