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 Wendy Giesenschlag
Wendy Giesenschlag
2,244 Points

Images- image not appearing 

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>My Page</title>
</head>

<body>
<img src="Tulips.jpg">
</body>
</html>

I am wondering if the image is not showing up due to the way I organized my files....

Folder: Images -Tulip.jpg Folder: my_directory

  • another page

index.html

9 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The way it works is that you have to put your images in the correct folder relative, to your HTML file.

Here's an example:

file directory structure example

Does that help?

If not, you can read up about absolute vs relative paths

Wendy Giesenschlag
Wendy Giesenschlag
2,244 Points
Wendy Giesenschlag
Wendy Giesenschlag
2,244 Points

Tedd, thank you for your suggestion....i can now see my image!!!!!

Trevor Wood
Trevor Wood
17,828 Points
Trevor Wood
Trevor Wood
17,828 Points

img src="/img/logo.png"

This is the code i use in my html file. Make sure that it has the backslash in front of it and if it's inside of a folder like "img" that it also has that in front of it.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

sounds like you want:

<img src="images/Tulips.jpg" alt="some pretty tulips">

You need to tell it to look in the "images" folder for the tulips.jpg

Check James' links for learning how it all works.

Wendy Giesenschlag
Wendy Giesenschlag
2,244 Points
Wendy Giesenschlag
Wendy Giesenschlag
2,244 Points

I tried all that you suggested. Thanks. I am now wondering if the image is being blocked by Notepad++ due to the fact that I am receiving this error message..."Some pictures have been blocked to help prevent the sender from identifying your computer. Open this item to view the pictures." However, once the error message is received, I can't open the item to view the picture. Any thoughts? Can anyone suggest another text editor?

Tedd Arcuri
Tedd Arcuri
8,058 Points
Tedd Arcuri
Tedd Arcuri
8,058 Points

Wendy, try sublime text. It's just beautiful. Coda is another good alternative, but does cost money.

gregmontjoy
gregmontjoy
88 Points
gregmontjoy
gregmontjoy
88 Points

Hey guys, I am having the same issue. I am working through the introductory HTML in building the example "Bakin" website and I cannot see the downloaded images on the website. I am using Sublime Text 2 as my editor and Chrome on a Mac with Mavericks installed. I have tried all of the suggestions above and still cannot see the images. Any suggestions would be greatly appreciated. Thanks.

gregmontjoy
gregmontjoy
88 Points
gregmontjoy
gregmontjoy
88 Points

Found the answer. Just had to do with the root directory. Images are showing up now. James' answer was a big help.

Neil Wallace
Neil Wallace
6,714 Points
Neil Wallace
Neil Wallace
6,714 Points

I struggled with the image problem in notepad++ until I found the following site: http://www.pagetutor.com/html_tutor/missing.html Which gave a very clear explanation of possible problems. I just did not have my images in the same folder as my html file.

James Barnett
James Barnett
39,199 Points

Neil Wallace - As your website grows you'll want to organize your images, CSS & HTML into seperate folders. Here's a tutorial where you can read more about how to organize your files