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

Can't load image!

Hi! I just started the build your own website track, and am at the Images and Lists lesson. This is the code I have:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> </head> <body> <img src="img/logo.gif" alt="Smells Like Bakin"> </body> </html>

I've gotten the title to show up on my website. I can't, for some reason, get the image to show up on my web page though.

In the lesson, it wasn't clear to me how/where exactly to load the images. So perhaps I haven't necessarily done it correctly? I tried to put my index.html in the same folder as the downloaded images folder, but that hasn't fixed the problem.

13 Answers

Matthew Aitken
Matthew Aitken
6,558 Points

Could you show the code you are currently using to try and load the image? I can then see where you are going right/wrong and correct your code accordingly; with explanation.

  • MjA -

Sorry, meant to put it in my last message:

<img src="img/logo.gif" alt="Smells Like Bakin">
<ul class="nav">
    <li><a href="a">About</a></li>
    <li><a href="a">Cupcakes & Prices</a></li>
    <li><a href="a">Locations</a></li>
    <li class="last"><a href="a">Contact Us</a></li>
</ul>

I finally got the image to load. I had the wrong link in my browser. But now I can't get the list to show up. Any suggestions?

Matthew Aitken
Matthew Aitken
6,558 Points

I'm glad to hear that you managed to solve that issue yourself.

Post the HTML code you are using to try and get the list to show and I will analyse it for you.

  • MjA -

EDIT - Your code has now loaded on my end.

Your code looks fine but I would make a couple of changes.

1) Make sure that this is all wrapped up in a 'div'

2) Change the place holder of you 'href="a"' to 'href="#"'

3) Where you have the '&' in your second list item, change it to '&amp ; (With no space between amp and ;)' as this will make sure that it is not misinterpreted (As '&' is also a function)

Other than that, it looks like it should be working. Give these suggestions a go and let me know how you get on.

  • MjA -

Isn't the HTML code in my last post?

Okay. I think I've found my issue, but I'm not sure how to fix it. I originally moved the "index.html" file it to a folder I created, with the images I had downloaded for this particular project. This originally worked, but when I went to save the "index.html" file again it saved it to my desktop as a new file, instead of re-saving the "index.html" that is in my folder.

Does that make sense? Does it need to be in the same folder as the images to pull from them?

I've noticed that it does need to be in the same folder as the images to pull the image, but I can't figure out why every time I save the sublime file it saves it as a new file on my desktop instead of re-saving the "index.html" file I have in my folder with the images.

Matthew Aitken
Matthew Aitken
6,558 Points

As you are requesting your images from a folder called 'img' you need the index.html file to be in the root directory of where you are working, with the 'img' folder on the same level. I am not sure why it is saving it as a new file each time. Try closing down Sublime, then reopen it and load your index.html file and see if that rectifies the issue.

  • MjA -

Figured it all out! Conclusion to most of this mess: Learn how to save files to the correct folder

Matthew Aitken
Matthew Aitken
6,558 Points

I am glad you have managed to solve it all. It can be a real pain when something doesn't work right and when there is no apparent reason why. Always make sure that you are working from the correct index.html and always make sure that your hierarchical structure is correct. Hopefully you can move on with your lesson now.

Any problems, big or small, just post to these forums and one of your fellow Treehouse code monkeys will try their best to help, just as I have today.

Good luck with the next steps!!!

  • MjA -

Hello everyone! I am new on here and as green as you can get with coding and programming so please pardon my ignorance... I had the same problem as Zachary and tried to do what was suggested to fix it and see the picture but in vain. The folder that contains the picture is on my desktop and the index.html file is in that folder, next to the index file of the full website. I tried to put the index file inside the img folder but it didn't work. I'm so confused and feel helpless already and I just started... I have a looong way to go! Sigh... Any help would be much appreciated!

I don't even know how to post my code... I copied and pasted with the ``` at the beginning and the end and it doesn't give me the clean black box everyone gets...

Matthew Aitken
Matthew Aitken
6,558 Points

Hello, and welcome to Treehouse.

I will try my best to help without your code to work from.

If the code is correct then it may well be the hierarchical structure of your files. Create a folder on your desktop called 'Treehouse' or 'Smells Like Bakin'. Inside that folder you should have your index.html. You should also have a folder called 'img' where you keep all your images and a folder called 'css' where you keep your style sheets. Now with that hierarchical structure, the code should work. Make sure that when you are linking the url to an image to write it as followed...

<img src="img/logo.gif" alt="Smells Like Bakin">

When you want to put your code on here you need to start the first line with the three floating comma things, followed by a html tag, and then paste your code and put another three floating comma things on the last line AFTER your code.

Hopefully this will correct your issue. If not, give me more information and I will try my best to help.

  • MjA -