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

Posted by Pranit Sheth
Pranit Sheth
1,588 Points

Cannot get the pictures displayed while working on HTML

I am working on the Smells Like Bakin' project which is being taught by Nick Petit. None of the pictures which are given to us to be downloaded are getting displayed on the web browser once I hook the the text editor with the browser. Can you tell why? I am using google crome

4 Answers

Darryl Miles
Darryl Miles
933 Points

You have to make sure that they are in the same directory as the index.html file that you are working on. So index.html is in your parent directory and the pictures have to follow how Nick put it in the video. For example: the parent directory where index.html is found could be C:/Treehouse/index.html. If your logo image was in the following directory C:/Treehouse/img/logo.gif then your code would need to match that directory for the image => <img src="img/logo.gif> You wouldn't need to add the parent directory to the image file because that is where your index.html file is located already. So it would then just need to access the subdirectory /img. If your picture you were trying to access was in the same directory as the index.html file then you would just need <img src="logo.gif>.

Daniel Jarvis
PLUS
Daniel Jarvis
Courses Plus Student 1,410 Points
Daniel Jarvis
Daniel Jarvis
Courses Plus Student 1,410 Points

ensure your points where you are inserting the images reads as follows

<!--First Image-->

<img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">

<!--Second Image-->

<img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">

<!-- Third and fourth-->

<img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
<img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">

I hope this has helped!

Genevieve FC
Genevieve FC
246 Points
Genevieve FC
Genevieve FC
246 Points

I am having the same problem. My code was written correctly, just like in the video. Instead of posting a picture, when I renew the Smells Like Bakin index.html, I'll get the tiny, general icon for pictures that won't open. The text also does not appear the same as in the video. Correct words, but the text format is different. Darryl, can you give a step-by-step on how to do what you are saying? Couldn't quite follow you.

Thanks!

Darryl Miles
Darryl Miles
933 Points
Darryl Miles
Darryl Miles
933 Points

Should be exactly how daniel jarvis displayed the code. If your page displays the area where a picture should be but the picture is not populating that space then you probably have the correct code. The problem may be that you aren't inputting the correct location for your image. When you download the project zip file you extract all files to a specifed folder on your drive where you would then have the css and img folder and your index.html and a logo picture (there is also a logo pic in img folder but I believe it is different file type maybe .png instead ofn.gif). If your folders are not set this way then when you copy the code in the video verbatim it may not be the same location where your files were. Or you're not using the correct file ext. (.png or .gif)