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 Structure the Image Gallery

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Nope, the image won't load for me either...

I followed the instructor's tutorial to the letter, and still could not get the image to appear when I saved and started the web page. I just get a broken image file. Here is a copy of my code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer </title> </head> <body> <header> <a href="index.html"> <h1>Nick Pettit</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>Ā© 2014 Nick Pettit.</p> </footer> </body> </html>

Thanks for any help.

Ramone Adams
seal-mask
.a{fill-rule:evenodd;}techdegree
Ramone Adams
Front End Web Development Techdegree Student 8,693 Points

Hey Jeffrey,

The code looks good so it should work properly. Can you view the image just by clicking on the jpeg in the "img" folder?

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Hi Ramone,

thanks for responding. Not sure if this might be the problem, but I'm using Linux. Would maybe going into Windows 10 be better? Would rather not do it, but will if I have to.

Ramone Adams
seal-mask
.a{fill-rule:evenodd;}techdegree
Ramone Adams
Front End Web Development Techdegree Student 8,693 Points

Hmmm. I'm actually not to sure Jeffrey. If I were you I would download the workspace project, go to ide.c9.io it's a cloud based develop environment which is pretty cool, and sign up using Github since we'll be using that. Then go to File after you're logged in, and go to upload local files to drag and drop the downloaded workspace files in environment to test it out. Hopefully it's not to confusing, but C9 is great and free so you shouldn't have to go to a windows platform if you don't want to. If you need anymore help let me know :-).

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Ramone,

Well, I tried Windows and it still didn't work. I will try your suggestion and let you know how it goes.

Ramone Adams
seal-mask
.a{fill-rule:evenodd;}techdegree
Ramone Adams
Front End Web Development Techdegree Student 8,693 Points

Sounds good Jeffrey. When you open C9 and drag/drop the project files. At the top right it has a Share button. My username is ramone386 if you send that invite to me on there and I can run it myself and see if I can look at it further for you.

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Ramone,

I just dumped the code and shared it with you. However, I can't even get it to run now. I'm probably doing something wrong, although I did set it up, it was kind of confusing.

Ramone Adams
seal-mask
.a{fill-rule:evenodd;}techdegree
Ramone Adams
Front End Web Development Techdegree Student 8,693 Points

Jeffrey,

Yes c9 is kind of confusing. So I figured I think we figured it out Jeffrey, I'm not sure if you noticed the changes in C9 but it worked fine for me. I did have to change this <img src="img/numbers-01.jpg" alt=""> to <img src="numbers-01.jpg" alt=""> because there was no "img" folder so it was pointing to a folder that wasn't there. If you don't have your images saved in a "img" folder then you just type them out as is. Folders are good for it looking clean and neat is all. But try it and let me know. I saved all the changes in C9 If not I'll copy and paste it in here.

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Ramone,

Despite being lost and not knowing what to do, I hit Preview in that cloud program that you sent me to, and the link actually worked. I'm just confused as to why I can't make it happen in the Workspacel

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Ramone,

Let me go back and review everything. I'm realizing that the code probably ran because you fixed it.

Ramone Adams
seal-mask
.a{fill-rule:evenodd;}techdegree
Ramone Adams
Front End Web Development Techdegree Student 8,693 Points

Jeffrey,

You did really, it was just pointing to an empty folder/ image that wasn't in the folder. Use the same code you have in Workspace and just type it as "numbers-01.jpg" and not "img/numbers-01.jpg". let me know if that works for you.

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Ramone,

It didn't work. I've tried a lot of different varients in Workspace, and the image is just broken, and I have no idea why, and it's really frustrating. I really appreciate the time you took to help me.

Ramone Adams
seal-mask
.a{fill-rule:evenodd;}techdegree
Ramone Adams
Front End Web Development Techdegree Student 8,693 Points

Jeffrey,

It's no problem, I'm here anytime. I know how this can be and coding isn't easy, it can get really discouraging and make you give up but I know that's not you. So I'm here anytime and don't mind staying here because we both know it works it's just in workspaces something is off. Maybe if you could copy the code from C9 and paste it in your workspaces and see what happens. Also I noticed you had an "untitled" document in there and it should have been "index.html" which was the reason it caused problems as well so I deleted in C9 and it worked fine. I'm here all night so ask away if you have anymore questions :-).

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Ramone,

I found out what I did wrong. When I downloaded the project folder with the images, the name "Image" was the name of the folder in the Workspace. I'm not sure if that's the name I gave it, or the name that it was titled when I downloaded it. Anyway, I changed the name of the folder in the Workspace to "img", and I opened the web page, and now the picture appears. Such a stupid error, I wasted hours on this. Anyway, thank you for all of your help.

Ramone Adams
seal-mask
.a{fill-rule:evenodd;}techdegree
Ramone Adams
Front End Web Development Techdegree Student 8,693 Points

Lol no problem Jeffrey. Trust me it's usually the smallest things that get us. I do it all the time. I'm glad you figured it out great job.

Jeffrey Blanch
Jeffrey Blanch
1,232 Points

Ramone, thanks for that uplifting response. I actually think you typed that before I was able to solve the problem. I really appreciate that you're here to help. I'm new to Treehouse and I'm on a week's free trial, but I will probably keep it beyond that. While I want to keep going right now, I'm just glad that I solved this error and really need a break, I'd been at this for hours. Thank you so much again for your help.