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
Ryan Hill
Courses Plus Student 503 PointsMy 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>
4 Answers
Hannah Mackaness
4,437 PointsVitaliy 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
801 PointsHello,
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
4,026 PointsFirst, 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
3,239 PointsI'm having the same problem as Brandon.
Vitaliy Bogdanov
7,612 PointsVitaliy Bogdanov
7,612 PointsYou need add "img/" in image file path. For example:
<li><img src="img/numbers-01.jpg" alt=""></li>