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 Jennifer Murray
Jennifer Murray
378 Points

images for "Smells Like Bakin"

Hello Everyone!

I am using Sublime Text Trial and Chrome Browser, so far I am doing well, but the images are not showing up on my browser after I enter the html, any help would be loved!

Jennifer

7 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Jennifer - The way it works is that you have to put your images in the same folder relative, to your HTML file.

Here's an example:

file directory structure example

Does that help?

If not, you can read up about absolute vs relative paths

Alejandro Castro
Alejandro Castro
210 Points

James Barnett :

I was having the same issue. Thanks for the great diagram explaining the need for creating a path for the images. This isn't remotely explained in the particular video that I was having this same issue with. I was able to correct the path in the code and the image came up.

Thanks for your help!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Jennifer - Look at the folder you put your html file in ...

  • Is there a folder inside of it named img?
  • Inside of the img folder ...
    • is there a file named you-bake-me-blush.gif?
Jeremy Hilder
PLUS
Jeremy Hilder
Courses Plus Student 9,084 Points
Jeremy Hilder
Jeremy Hilder
Courses Plus Student 9,084 Points

You need to make sure the path to the images is correct.

So in the folder you have the html page in copy in the downloaded images folder (img)

then make sure the img tag src looks something like

src="img/you-bake-me-blush.gif"

Hope it helps

Jennifer Murray
Jennifer Murray
378 Points
Jennifer Murray
Jennifer Murray
378 Points

Thank you Jeremy,

I am guessing it may not be exactly what he is typing in the video then.

:))

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

@Jennifer – If you're still having issues displaying images in the browser, please post a snippet of your HTML code. Thanks!

Jennifer Murray
Jennifer Murray
378 Points
Jennifer Murray
Jennifer Murray
378 Points

Guil,

for some reason it is not letting me paste my snip! ouch Newbie trouble for sure here! lol Thanks in Advance!!!

Here is what I have so far:

<html><!DOCTYPE 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"> <ul classs="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> <div id="intro"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p></div>

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

<div id="featured-cupcake">
  <h2>Cupcake of the Week</h2>
  <p>This week's featured cupcake is the <a href="#">Avacado Chocolate cupcake</a>.  Its strange combo of flavors will kick your taste buds into fiesta mode!</p>

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

</div>

</body> </html>

Jennifer Murray
Jennifer Murray
378 Points
Jennifer Murray
Jennifer Murray
378 Points

Thank you James! I will read up on the info provided and try again!