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 Build a Simple Website Text Editors and HTML Finishing the HTML

Posted by Jessica Clish
Jessica Clish
Courses Plus Student 1,238 Points

Images not showing up

I am writing HTML for the Build a Simple Website and when I go to my google chrome page to check my progress none of my images show up as images...only writing.

9 Answers

Adam Lake
Adam Lake
3,810 Points
Adam Lake
Adam Lake
3,810 Points

I'm going to assume the writing that you are seeing is the alt writing. Are the images definatly in the directory that you are trying to get them from ? And are they definatly spelt Correctly and with .jpg .gif .png at the end ? Can you paste the code here so I can check it out ?

Frank Gross
PLUS
Frank Gross
Courses Plus Student 530 Points
Frank Gross
Frank Gross
Courses Plus Student 530 Points

Try another browser and double check that your images are in the right file and that the file path is correct. Otherwise you can reply with your full index.html and go from there.

Jessica Clish
Jessica Clish
Courses Plus Student 1,238 Points

Thanks Frank! I tried Safari and Google Chrome and I couldn't even get the Safari site to work. It's probably something simple and I'm not quite sure what it is. I'm a complete novice but I love learning on Tree House! I'm not sure what a file path is...eeekkk...I feel silly saying these things!

Violet Whitworth
Violet Whitworth
209 Points
Violet Whitworth
Violet Whitworth
209 Points

You're telling the html page to look in the "img" directory for the files, make sure the files are in a folder named "img".

Jessica Clish
Jessica Clish
Courses Plus Student 1,238 Points

Thanks Violet, I'm really trying to do this but not sure I'm doing it right. I downloaded the zip file from the site and my mac automatically opens it and stores it in downloads. The downloads folder can be found under my name on my computer. I have no idea where to put it so the html can find the img folder. Any ideas?

Frank Gross
PLUS
Frank Gross
Courses Plus Student 530 Points
Frank Gross
Frank Gross
Courses Plus Student 530 Points

This is how the Folder Should Look

Jessica Clish
PLUS
Jessica Clish
Courses Plus Student 1,238 Points
Jessica Clish
Jessica Clish
Courses Plus Student 1,238 Points

Thank you for your ultra fast response! I double checked my files that I downloaded and the images and they all seem the same....not sure what I did! The images now just show up as a little piece of paper with a mountain scape on it and it's torn in half. Gaaahhhh...I'm just learning but I really want to get it right!

<!DOCTYPE HTML> <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 class="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 is the <a href="#">Avocado Chocolate Cupcake</a> Its strange combo of flavors will kick your tastesbuds into fiesta 
    mode!</p>
    <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </div>

<div id="new-cupcakes>
  <h2></h2>"

</body> </html>

Frank Gross
Frank Gross
Courses Plus Student 530 Points

First of the html looks like it should work. The only thing that could go wrong is the actual location of the images that the html is trying to locate. Make sure that all the images are in a file named "img" and also make sure that is located in the same place as the index.htm. So in short you should have a file that holds both the 'img' folder (with all the images in it) and the index.html.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

See this article i wrote on folder structure here may save time in the future

Jessica Clish
PLUS
Jessica Clish
Courses Plus Student 1,238 Points
Jessica Clish
Jessica Clish
Courses Plus Student 1,238 Points

Thanks everyone, I'm working on a mac...but I think I may have screwed up with the actual folder saving. I'm still trying to figure it out...used to know how on a pc but still getting used to my mac.

Dan Rodgers
Dan Rodgers
1,414 Points

Hey Jessica, Did you figure out how to save into the right folder? I think I am having the same problem!

Thanks

Violet Whitworth
Violet Whitworth
209 Points
Violet Whitworth
Violet Whitworth
209 Points

Whether you're on a Mac or PC, it's all the same. If you are opening the HTML file on your computer through a browser, it's the same relationship if you uploaded your files to a host server. If your HTML says the source file is "images/test.jpg" then you have to make sure that the file has the same name and is in a folder named "images" within the same folder your HTML file is in.

In example: If your .html file is in a folder named "web", you have to create a folder in the "web" folder named "images". You have to place the image you plan to use within the "images" folder. In other words, that image is now in /web/images/test.jpg Your .html file MUST match the exact file location and file name. Because the test.jpg is in the "images" folder and the .html file is in "web", "web" is your "root" directory. Therefore in your .html file you only need to put < img src="images/test.jpg"> not < img src="web/images/test.jpg"> If you typed that, the .html file will look in this location: /web/web/images

I hope this makes sense.

Violet Whitworth
Violet Whitworth
209 Points
Violet Whitworth
Violet Whitworth
209 Points

The best way honestly is to get a cheap web host and upload files to the server and use that to work in. :) Also, Chrome is an excellent tool to learn web. You can visit your page and if there is an error, you can right click on that item and select "Inspect Element" this will open a simple debug area and you will be able to see what the browser is trying to do. It makes trouble shooting super easy because you can see what the browser is trying to do.