Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Creating HTML Content Structure the Image Gallery

Rob Edworthy
Rob Edworthy
950 Points

Picture not displaying correctly

My code is the the same as the instructors as below, I have also created the img folder and copied the files etc. But instead of the large picture that he displays, I get a small broken picture icon. ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Rob Edworthy | Designer</title> </head> <body> <header> <a href="index.html"> <h1>Rob Edworthy</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <img src="img/numbers-01.jpg" alt=""> </li> </ul> </section> <footer> <p>© 2015 Rob Edworthy.</p> </footer> </body> </html> '''

Hmm, everything looks okay...

If you actually select the image numbers-01.jpg in the img folder within Workspaces. Do you see the image there? Or is it still a broken image? If that's the case you could try deleting the image from Workspaces and reuploading.

Rob Edworthy
Rob Edworthy
950 Points

It opens correctly from with the img folder in workspace.

Can you create a Snapshot of your Workspace? So that I may take a closer look.

Mark VonGyer
Mark VonGyer
21,215 Points

Code looks fine. Is the image in the correct folder?

Is your HTML file in the main folder?

Is the image .jpg?

Rob Edworthy
Rob Edworthy
950 Points

Yes according to the instruction, create a img in the root of the file structure place the jpg in it. The index.html is also at the root level.

@robedworthy I downloaded your workspace to test locally and everything works fine. I'm not too sure what's wrong. Maybe a workspaces issue...

I recommend try launching a new workspace from Structure the Image Gallery and working from there.

-Edit: I did just that with your original source code and everything worked.

Rob Edworthy
Rob Edworthy
950 Points

Thanks robby, I'll give that a try in the morning. Have just turned the pc off, will update this then.

7 Answers

Joy Kesten
STAFF
Joy Kesten
Treehouse Guest Teacher

Rob Edworthy in your snapshot it looks like there is an uppercase "I" on the folder title and a lowercase "i" in the path to the file in your image tag. Making the case the same, either one works, should do the trick. Let me know if it doesn't

<img src="Img/numbers-01.jpg" alt="">

Ha, I can't believe I didn't noticed that...

Rob Edworthy
Rob Edworthy
950 Points

Thanks Joy, so need to check more carefully for typos. ☺️

Joy Kesten
Joy Kesten
Treehouse Guest Teacher

:) My pleasure, it's aways the littlest things!

Daisy Lloyd
Daisy Lloyd
1,472 Points

I did exactly the same thing - I had a lower case 'i' when my folder had an upper case 'I'...glad I read this as I was getting very frustrated about why it wasn't working!

I have the same problem.

How do I upload the snapshot to show you? Please help.

click the camera icon on the top rigth corner

Joy Kesten
Joy Kesten
Treehouse Guest Teacher

Yup Yamin Chen it's hard to help until we can see what you're working on. Let us know if you need more help with the snapshot.

Here is my snapshot.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jason Chen | QA Tech </title> </head> <body> <header> <a href="index.html"> <h1>Jason Chen</h1> <h2>QA TECH</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contac</a></li> </ul> </nav> </header> <section> <ul> <li> <img src="img/numbers-01.jpg" alt=""> </li> </ul> </section> <footer> <p>© 2015 Jason Chen.</p> </footer> </body> </html>

I read a few post again and finally figured it out. The folder I named image instead of img. So I renamed the folder and refresh. Got it! It feels great when I see the pictures. Thanks a lot!!!