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 Add Image Gallery Content

Bret Vallun
Bret Vallun
6,087 Points

My images are showing up as a black box with an "x" in them. My code matches the video. All images are like this.

Here is the list of my code. When I preview my website, the images display as black boxes with an "x" in them. All images do this, including the facebook and twitter logos.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bret Vallun | Artist</title> <link rel="stylesheet" href="css/normalize.css"> </head> <body> <header> <a href="index.html"> <h1>Bret Vallun</h1> <h2>Artist</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> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a>
</li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Backwards</p> </a>
</li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Playing with blending</p> </a>
</li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>80's Glow</p> </a>
</li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Shapes</p> </a>
</li> </ul> </section> <footer> <a href="http://twitter.com/reddiebret"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/bret.vallun"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>Ā© 2015 Bret Vallun.</p> </footer> </body> </html>

3 Answers

Hey Bret!

Make sure that the images you are wanting to include are in the 'img' folder. Check this out and let me know how you get along!

-Luke

Bret Vallun
Bret Vallun
6,087 Points

I had titled the folder as "Image" instead of "img." The preview now matches the one in the video. Thank you!

Mark Burge
Mark Burge
2,626 Points

Did you load the file packet with the images in it?

Robert Yengibaryan
Robert Yengibaryan
1,118 Points

I was about to ask the same question. The problem was that my Image folder's name did not match the "img scr tag", and vice-versa. Now the problem is resolved. Thank you all!