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 Cheryl R
Cheryl R
7,796 Points

Images not showing up in browser

Hello I think I need some assistance as I do not seem to understand why my pictures are not showing up in the browser (s).

I am working on the track Become a Web Designer under the section Build a Simple website.

I have tried this in both firefox & google chrome and my images are not coming up correctly.

In chrome I can see what appears to show what should be an image with a break leading but under firefox I see nothing.

I downloaded the lesson files to my desktop so I am not clear what is going on with the images. Any help to correct this would be great. Thanks, Cheryl

Below is my code:

<!DOCTYPE HTML> 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin'Cupcape Company</title>
</head>
<body>
  <img src= 'img/logo.gif' alt="Smells Like Bakin">
  <ul class="nav">
      <li><a href="#">About</a></li>
      <li><a href="#">Cupcakes &amp; Prices</a></li>
      <li><a href="#">Locations</a></li>
      <li class="last"><a href="#">Contact Us</a></li>
  </ul>
  <div>
    <div id="intro">
      <h1> Opposites really do attract, especially in our kitchen! We combine unexpected flavor 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 cupcakes">
    <h2>Cupcake of the Week</h2>
    <p>This week's featured cupcake is the  <a href="#">Avacado Chocolate Cupcake</a>, It's strange combo of the flavors will kick your taste buds into fiesta mode!</p>
    <img src="img/featured-cupcake.jpg" alt="Avacado 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="#">JaLapeno So Spicy</a>.</p>
        <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src= "img/new-cupcake-jalapeno.jpg" alt="Jalapeno 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 fot ehtm 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="#">bacon@smellslikebakin.com</a></p>
    </div>
    <p> We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
    <a href="https://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="copywright"> 
      <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>

</body>
</html>

4 Answers

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

The 2 most common mistakes when images are not showing up are a typo with the file names or using the wrong file path, so triple check the file name and path.

Here's a tutorial on file paths that should get you going.

Cheryl R
Cheryl R
7,796 Points
Cheryl R
Cheryl R
7,796 Points

James, Great thank you I will check that out the tutorial on file paths.....seems I need that. I think it is a file path issue after going over tho code pen.

James Barnett
James Barnett
39,199 Points

Yep with codepen you have to use urls to images that are accessible on the Internet. One of the easiest ways to do that is to use an image hosting service like imgur.com.

Cheryl R
Cheryl R
7,796 Points
Cheryl R
Cheryl R
7,796 Points

James Barnett I tried to access the file path tutorial but when I click the link it is invalid. So my question is since I am on my computer and have downloaded the files to work through the lessons the images are not being hosted on a server but on my desktop how then without theses images being hosted somewhere do I work thru the tutorial? (hope that makes sense)

Samuel Johnson
Samuel Johnson
9,152 Points
Samuel Johnson
Samuel Johnson
9,152 Points

Im guessing youve worked through this by now, but you dont have to have the files on a hosted system to work through the tutorial. As long as the links in your HTML point to the correct place on your computer they will load fine when you open up the HTML file through your browser rather than using codepen.