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 How to Make a Website Creating HTML Content Build the Footer

Posted by Ryan Hill
Ryan Hill
Courses Plus Student 503 Points

My images are not showing when i try to view in web browser, they are showing up as broken links

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ryan Hill</title> </head> <body> <header> <a href="index.html"> <h1>Ryan Hill</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li><img src="numbers-01.jpg" alt=""></li> <li><img src="numbers-02.jpg" alt=""></li> <li><img src="numbers-06.jpg" alt=""></li> </ul> </section> <footer> <p>Ā© 2015 Ryan Hill.</p> </footer> </body> </html>

Vitaliy Bogdanov
Vitaliy Bogdanov
7,612 Points
Vitaliy Bogdanov
Vitaliy Bogdanov
7,612 Points

You need add "img/" in image file path. For example: <li><img src="img/numbers-01.jpg" alt=""></li>

4 Answers

Hannah Mackaness
Hannah Mackaness
4,437 Points
Hannah Mackaness
Hannah Mackaness
4,437 Points

Vitaliy is right - you need to add the image file path. This is because you are asking the site to search for something called 'numbers.jpg' . That command is in the html file and so the site will look for the image in the same 'level' as the html file. It won't find it because the image is inside a folder- the img folder - and so you have to tell the site to first look in the folder. Imagine you are looking for a document in your study. You look all over the surface of your work desk but cannot find it, you open a drawer and there it is! In the drawer.

You need to give the "look in the drawer" command to the site before you can find what you want.

Brandon Halliburton
Brandon Halliburton
801 Points
Brandon Halliburton
Brandon Halliburton
801 Points

Hello,

I'm having the same problem, but my code appears to be right. Any help?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Brandon Halliburton | Front-End Web Developer</title> </head> <body> <header> <a href="index.html"> <h1>Brandon Halliburton</h1> <h2>Front-End Web Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <img src="img/numbers-02.jpg" alt=""> </li> </ul> </section> <footer> <p>Ā© 2015 Brandon Halliburton.</p> </footer> </body> </html>

Tom Meysen
Tom Meysen
4,026 Points
Tom Meysen
Tom Meysen
4,026 Points

First, make sure you uploaded the image to the workspace. If the files are in a zip-folder unzip it first, then you have to drag them to the left bottom of your workspace.

If you already did this, look where you saved your images, inside a folder like "img" then you have to change the src to: "img/numbers-01.jpg"

If this is also not the case, check if you didn't place your index file in a folder by accident. If you did that, best thing to do is to remove it out of the folder or change to src to this: "../img/numbers-01.jpg" this will tell the code to go out of the current folder (../) and then go to the folder "img"

Jessica Ramirez
Jessica Ramirez
3,239 Points
Jessica Ramirez
Jessica Ramirez
3,239 Points

I'm having the same problem as Brandon.