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 Build the Footer

Posted by Michael Watkins
Michael Watkins
Courses Plus Student 1,973 Points

Image folder placement/code check

Is the placement of the image folder important to how the page works? I had trouble getting the image folder uploaded to workspace and I think that's part of the reason why my page isn't working. the links in the footer are fine however the photos aren't showing up. any help would be awesome. Thanks!

Ryan McKeown
Ryan McKeown
6,999 Points

I am still having issues with my pictures showing on my website. I am using Google Chrome. I have tried every trick I could think of to get it fixed.

Michael Watkins
Michael Watkins
Courses Plus Student 1,973 Points

After unzipping the file and drag-n-drop to workspace, I'm having the same problem as you where the pictures wont display to my website. Pretty frustrating so I'm going to send an email to support about this. That and the fact I cant drag-n-drop the files into the "img" folder in Google Chrome or IE is frustrating.

2 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi Michael,

Normally your folder structure will look something like this:

  • index.html
  • css => styles.css
  • img => image-name-1.jpg, image-name-2.jpg

If they are different it doesn't matter but you need to make sure your paths match in your HTML, e.g.

<link rel="stylesheet" type="text/css" href="css/styles.css">

or:

<img src="img/image-name-2.jpg" alt="Alternate text">

If your index.html is in the same folder as your style sheet for example your external style sheet link might change to:

<link rel="stylesheet" type="text/css" href="styles.css">

Hope that helps.

-Rich

Michael Watkins
PLUS
Michael Watkins
Courses Plus Student 1,973 Points
Michael Watkins
Michael Watkins
Courses Plus Student 1,973 Points

-Rich I wish I were farther along on day 3 but I'm not quite at that part. I think what's happening is because my index folder is inside the image folder over in the gutter, when I check my website the pictures wont show up. maybe I'm wrong.

Rich Bagley
Rich Bagley
25,869 Points

Hi Michael,

I was attempting to explain that with the above... I probably needed to word it better :)

If you right click on the red cross where the missing images should be and choose 'properties' you should be able to view the current path. This will help you to determine your folder structure.

Your image tags probably look something like this:

<img src="img/image-name-2.jpg" alt="Alternate text">

This is saying look for the image-name-2.jpg image inside the img folder based on the location of the file.

One quick test would be to remove the img part from the path, e.g.:

<img src="image-name-2.jpg" alt="Alternate text">

If your HTML file is in the img folder this should test that.

Hope that all made some kind of sense :)

-Rich