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 Paul Addison
Paul Addison
137 Points

Struggling Loading Images

Hi All, I'm having a similar problem to some on here. I'm also playing with the cupcake website. I have a folder on my desktop that contains the index file. Within that folder is a another folder called 'img' which contains all the cupcake photos. All the photos have loaded fine apart from the logo image at the top, and the facebook and twitter images at the bottom. I've looked over my code a hundred times and I can't see anymore! I've read through everybody else's answers but none are working for me. Can anyone help? My code is below...

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-a8"/> <title>Smells Like Bakin' Cupcake Company</title> </head> <body> <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> <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="#">Avocado Chocolate cupcake</a>. Its strange combo of flavours will kick your tastebuds into fiesta mode!</p>
  <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>

<div id="new-cupcakes">
  <h2>Fresh Out The Oven</h2>
  <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="a">Jalapeno So Spicy</a>. </p>
  <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
  <img src="img/new-cupcake-jalapeno.jpg" alt="Jalepeno So Spicy">
</div>

<h2>Inside the Kitchen</h2>
<p>Smells like Bakin' started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck. </P>
  <p><a href="#" class="btn-small">Read More</a></p>


  <h2>Get Bakin' With Us</h2>

  <div id="contact">
    <p>Call Us: <span>1-555-CUP-CAKE</span><br>
      Email Us: <a href="#">bakeon@smellslikebakin.com</a></p>
    </div>


    <p>We announce all of our new flavours first through Facebook &amp; Twitter, and even take requests!</p>
    <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
    <a href="https://www.twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>

    <div id="copyright">
      <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights reserved.</p>
    </div>

</body> </html>

5 Answers

Edward Dudley
Edward Dudley
1,178 Points
Edward Dudley
Edward Dudley
1,178 Points

Hi Paul! I had that same problem. This is how you work it out. You browser want to know your whole system url.

.btn { color: #faf3bc; background: #4fb69f url('file:///Users/DUDLEY/Desktop/SmellsLikeBakin/img/texture.png') no-repeat right top; margin: 0px 0px 0px 0px; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }

Paul Addison
Paul Addison
137 Points

Hey Edward! - No way! I have to type in all that extra code?? How come this isn't explained in the movie?

Victor Arellano
Victor Arellano
12,045 Points
Victor Arellano
Victor Arellano
12,045 Points

Hello Paul.

Make sure you typed the name of the images correctly, as well as the extension. Are the logo and social icons located in the same folder as the other images? Open them externally to check. Also, check your browser settings to see if it displays all types of pictures (png, jpg, gif, etc.).

Hope this helps.

Paul Addison
Paul Addison
137 Points
Paul Addison
Paul Addison
137 Points

Hey Victor - Thanks for your reply. Yes, I've checked all this and all appears to be ok. Still missing those images though.

Dennis Skoko
Dennis Skoko
12,860 Points
Dennis Skoko
Dennis Skoko
12,860 Points

What browser are you using? Chrome caches the images and css hard and that makes the site look like the old one even when you change the code. If you are using Chrome, try this.

Open developer tools (F12) and then right click the refresh button and select "Empty cache and hard reload" and see if that helps.

Paul Addison
Paul Addison
137 Points

Hi Dennis - I am using Safari on a Windows 7 laptop.

Dennis Skoko
Dennis Skoko
12,860 Points

Can you post your whole folder? Either you are missing those 3 images or you have a mismatch tags in you index.html, and it's easier to find the problem when we have something concreat go check out.

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

Sounds like you've got a file path issue with your images.

The way it works is that you have to put your images in the correct 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