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

Posted by Logan Henry
Logan Henry
Courses Plus Student 264 Points

Images within the Site Project

The images within my site project show up as blank images. The coding is correct, but it doesn't show the image properly when I refresh the page.

3 Answers

Marcus Tisäter
Marcus Tisäter
4,886 Points
Marcus Tisäter
Marcus Tisäter
4,886 Points

Right, so here is an img tag with a picture called treehouse. It's a png file.

<img src="treehouse.png">

This looks fine and would appear to work in you're browser IF the html page is in the same directory as the treehouse.png picture is located at.

Now what happens if I move the treehouse.png to let's say another directory? Then this code wouldn't work becuase the html file can't located the treehouse.png picture.

Directory CSS: treehouse.png

Directory HTML: index.html

  <img src="CSS/smiley.gif">

This would work becuase now, index.html knows that this img src attribute is pathed to you're css directory.

Good luck!

Marcus Tisäter
Marcus Tisäter
4,886 Points
Marcus Tisäter
Marcus Tisäter
4,886 Points

Make sure that you're pictures that you want to display on the webpage is in the same directory as the html page. If not, you have to path the image of where it's located at.

Logan Henry
PLUS
Logan Henry
Courses Plus Student 264 Points
Logan Henry
Logan Henry
Courses Plus Student 264 Points

Thank you for the help! I'm still having trouble directing the website to the correct directory. I have the website waters file downloaded with the images within it, so I thought once I put in the <img src=(link) to it that it would connect directly to the folder, but the only thing showing up is a box with a small image that's torn, basically stating that it can't see what I'm trying to connect it to.