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 Kaitlin Dunning
Kaitlin Dunning
163 Points

Smells Like Bakin' project images missing

When working on the first project, Smells like Bakin' website, none of the images are showing up on the webpage I created. I checked my code and it is exactly what the video said to type in. All of the images from the folder for the project were downloaded correctly onto my computer. Instead of the image appearing, all I am seeing is a broken image icon. This is consistent throughout the entire page, with all the images not showing up. Please help!

6 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Kaitlin, if you could paste in your HTML and a screenshot of the folder structure that would help to identify what's happening.

Kaitlin Dunning
Kaitlin Dunning
163 Points
Kaitlin Dunning
Kaitlin Dunning
163 Points

<!DOCTYPE HTML> <html> <head> <meta hhtp-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 class="nav"> <li><a href="a">About</li> <li><a href="a">Cupcakes &amp: Prices</li> <li><a href="a">Locations</li> <li class="last"><a href="a">Contact Us</li> </ul> <div id="intro"> <h1> Opposites really do attract...</h1> <p><a href="a" 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="a">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="Avacado Chocolate Cupcake">

</div>

<div id="new-cupcakes"> <h2>Fresh Out the Oven</h2> <p> Our newest cupcakes are <a href="a">Bacon Me Crazy</a> and <a href="a"> Jalepeno 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... <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="a">bakeon@smellslikebakin.com</a></p>
    </div>

    <p>We announce all of our new flavors first through Facebook and Twitter, and take requests!</p>

The folder is located in an img folder on a mac. Thanks for the assistance!

James Barnett
James Barnett
39,199 Points

It looks like your code isn't being formatted correctly by the forum software. The forum uses markdown to correctly format code, check out this thread on how to type code in the forum for some examples.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

I'm not sure your HTML pasted in correctly as it seems broken up, but the image tags look correct. There should be a video to the right of these posts (or below if you have a smaller screen) called "tips for asking questions" which covers adding in code.

Is your img folder in the same folder as your .html file? The code is looking for images in a folder called "img" in the same directory as the .html file.

Something like:

  • .../website/index.html
  • .../website/img/you-bake-me-blush.gif
  • .../website/img/featured-cupcake.jpg
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.

Let us know how you are getting along with this here in this thread.

Kaitlin Dunning
Kaitlin Dunning
163 Points
Kaitlin Dunning
Kaitlin Dunning
163 Points

Hey Tom and James, my text.html file is in my img folder. Is that the correct place? This is the code:

<body>

    <img src="img/logo.gif" alt="Smells Like Bakin'">
    <ul class="nav">
    <li><a href="a">About</li>
    <li><a href="a">Cupcakes &amp: Prices</li>
        <li><a href="a">Locations</li>
        <li class="last"><a href="a">Contact Us</li>
        </ul>
        <div id="intro">
        <h1> Opposites really do attract...</h1>
        <p><a href="a" class="btn">Browse Our Cupcakes</a></p>
        </div>

        <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
        ```
Tom Bedford
Tom Bedford
15,645 Points

Hi Kaitlin, you need to either:

1) Take away "img/" from the start of the image directories.

OR

2) Inside the folder you are working in make a folder called "img" and put just the images in there. Keeping the .html file in the original folder.

The second option is better for organisation especially when you work on larger projects.

Saransh Kalia
Saransh Kalia
516 Points
Saransh Kalia
Saransh Kalia
516 Points

Well you need to remove your mytext.html file from img folder and put it in the website directory.

The directory structure should be like this:-

yourwebsitefolder/img/image.gif

yourwebsitefolder/css/design.css

so you need to move your my text.html file from "img" to "yourwebsitefolder"