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

Image won't load

Hi Everyone,

I'm working on the Smells Like Bakin' Cupcake Company, in the Website Basics track and I've already read several answers to questions similar to this across the forum, but I'm still stumped. My problem, I believe, is that I'm not sure I've put the downloaded images in the right place. I'm using a Windows laptop (sadly) and so there's no lovely working directory thingy..or is there??

So far, I've retrieved them from their zip file, and saved them in a folder on the Desktop.

<!DOCTIYPE 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>

5 Answers

go to your file. Right click go all the way down to properties. Look at the Location. Copy this put it in between the " " where you currently have img/logo.gif. now make sure you put .gif, .jpg, .png after the file name. That should do the trick.

Hi Michael,

Thanks for this. I've tried it, but to no avail :-( so frustrating right now... The index.html file and the image file are saved in the same folder on my Desktop. Here's what it's looking like at the moment.

<!DOCTIYPE 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="C:\Users\Lesego\Desktop\Treehouse.gif" alt="Smells Like Bakin'">
  </body>
</html>

I think the problem is that you put the wrong slash in before "Treehouse.gif". Change it to C:\Users\Lesego\Desktop/Treehouse.gif

If that doesn't work I would suggest re-saving your file and making sure it is in that exact directory. I had a similar problem earlier and I re-saved and tried again. It worked just fine. It can be in any permanent directory i.e. NOT downloads. II think you should put all the images and your project in the same folder. Have subfolders for views (html) and css

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points

Please make sure that, you index.html file and img folder are contained withing one folder (for example, my cupake project is saved under a folder "website practice" and within that folder I have , file name - index.html and folder name - img (where all the pictures are saved). it is a bad practice to scatter your work files on desktop. One project and one folder and its sub-folders. keep it simple.

Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

also, forgot to mention - dont forget css folder also.

Hi guys, thanks so much for your suggestions. I've figured it out at last. It was a tiny but significant sentence I missed during Nick's video: where he types img/logo.gif, the img part is in fact the location of the folder containing the image files, and the logo.gif part is of course the name of the image file itself! So now mine looks like this:

<!DOCTIYPE 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="/C:\Users\Lesego\Desktop\Treehouse\logo.gif" alt="Smells Like Bakin'">
  </body>
</html>