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

General Discussion

Adding Image to Simple Site?

I just started the Build a Simple Website project and haven't yet downloaded the files that go with it, but I'm not sure how to explain with code where the image file is. Just how detailed do I need to be? In the example, there are only a couple of steps, but where is the "home base" of sorts from which I being listing folders and subfolders to reach the image? I'm using a PC, in case that matters.

Thanks.

13 Answers

I think I figured it out, actually... It makes sense that "home base" is the folder where the HTML file is. My crappy little website has a logo now!

Feel free to offer additional advice or explanations if you'd like, for the points. :)

Hey, I have the same problem, could you explain how you fixed it ? Thanks :)

Sure, so wherever you have your index file saved is your "home base". Say your index file is in Documents/Treehouse and all of your pictures are in Documents/Treehouse/img. Then you would type: <img src="img/featured-cupcake.jpg">

If your pictures are in a folder even further away, just keep listing the folder names - but the folder has to be somewhere inside of the folder where your index file is. So you could have <img src="web/pictures/img/featured-cupcake.jpg"> or whatever as long as the Web folder is inside of the Treehouse folder, where your index is.

Does that make sense? D:

[ed. note]: Added markdown to fix code formatting

Thanks Maya - that's really helpful! :)

Thank you Maya, like I was saying on the other post, now some of my pictures appear and some don't, but I try to fix it. Thanks again :)

I've tried everything, and i mean every single variation, and it still won't work. The alt text is showing but not the image. Help please..

Where is the picture in relation to your index.html file?

It's within a folder in the same directory as the index.html file.

I'm afraid I can't help beyond what I posted earlier. Sorry! I hope you find out what the problem is.

James Barnett
James Barnett
39,199 Points

ali - Create a codepen with your code, so we can see the bigger picture.

@Ali- Remember to save the html file your working on IN the same directory you found index.html. That way lets say the image is in a folder called "img" and the image is called "logo.gif", you just have to type "img/logo.gif" inbetween the img tag. Hope that helps bud!

Thanks to all. I was stuck here too but created a folder called Treehouse and put the img and css folders in there together with index.html. Then put the code as <img src="treehouse/img/logo.gif" alt="Smells Like Bakin"> and it showed up!

I am having the same trouble. I have never experienced this before when writing simple HTML into wordpress sites but in the code editor I can't get it to work. All that shows up is my alt text. Is there something missing from the instructions for this lesson or am I just dense?