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 Add Image Gallery Content

Elias Harfouch
Elias Harfouch
616 Points
Posted by Elias Harfouch
Elias Harfouch
616 Points

Unable to see images created/linked in HTML Workspace in Preview Page

Hi,

I've been following this video [Add Image Gallery Content to Webpage] by inserting links to images I've downloaded from the project file. However, when I preview my page [after following coding instructions in video] it doesn't display the images but rather small boxes with a ? inside it. When I click on the hyperlink for each image to see the larger image, it gives me a 404 Not Found message. I appreciate it might be difficult for you to know what I might have done wrong without seeing my workspace coding but any ideas would be most appreciated.

I hope this makes sense.

Thanks very much.

Elias.

4 Answers

Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points
Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points

If the images don't show up that most likely means that you haven't properly linked to them. Check to see if the images are inside a folder and then check if that folder shows up in the img src attribute.

Elias Harfouch
Elias Harfouch
616 Points
Elias Harfouch
Elias Harfouch
616 Points

Thanks very much Cosmin - it was my mistake - link to larger images is now working.

Ali Hamra
Ali Hamra
1,386 Points
Ali Hamra
Ali Hamra
1,386 Points

Most probably when it gives your 404 Error It indicates that either the image path is not correct or you have not uploaded the project images to the correct (img) folder in your workspace.

If none of the above solved your problem, please edit your question and insert the code.

Elias Harfouch
Elias Harfouch
616 Points
Elias Harfouch
Elias Harfouch
616 Points

Thanks Ali! Much appreciated. The links to the larger images is now working but the smaller images on preview webpage not displaying images - not sure if it is to with some configuration on my computer perhaps….

Eivind Jonassen
Eivind Jonassen
5,994 Points
Eivind Jonassen
Eivind Jonassen
5,994 Points 
<img src="folder/filename_of_image">

Your code should look like that. Like Cosmin Cioaclă said, its probably not linked correctly.

Elias Harfouch
Elias Harfouch
616 Points
Elias Harfouch
Elias Harfouch
616 Points

Thanks very much Elvind. I had a look at my code again and I did make some errors which I've corrected. The link is working to the larger images in my preview but the smaller images are still not displaying - I'm guessing that might not be a result of the code but maybe something else…Thanks again.

Elias Harfouch
Elias Harfouch
616 Points
Elias Harfouch
Elias Harfouch
616 Points

Great advice. I definitely will next time. Thanks again!

Elias Harfouch
Elias Harfouch
616 Points
Elias Harfouch
Elias Harfouch
616 Points

I spotted another coding error I made for each image - now the smaller images are showing.

Thanks very much guys.

Eivind Jonassen
Eivind Jonassen
5,994 Points
Eivind Jonassen
Eivind Jonassen
5,994 Points

Nice! :) Next time you ask a question it can be very useful to show your code. That way we can figure out the problem faster and give more precise feedback. Check the Markdown Cheatsheet at the bottom of the page for instructions on how to do this. :)