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

Can't get images to show

Thank you for very much for the quick reply last time. I am trying to work on getting the images into my web design. They appear to be there but when I preview the webpage it shows what appears to be a broken picture (a small square with what looks like a mountain) instead of the picture like we see when Nick shows us a preview of his work

4 Answers

show the section of the code where you added the images

Zach Saul
Zach Saul
11,156 Points

If you post your code I could tell you specifically what's going on: but if I had to guess:

  1. double check that your image name in your "src" attribute of you image element matches EXACTLY with whatever you named your image, this isa common issue. So for example if you tried to reference an image in your html as follows:

<img src="img/photo_name.jpg">

then "photo_name" would need to match your file name EXACTLY, and remember that it IS case sensitive, and spaces matter as well.

  1. Double check that your folder names match. I personally made this mistake: if you name your image folder img and then refer to it using "images" in your code h the link will be broken as well.

  2. double check your path, and make sure its saved in the proper folder. your actual image must be saved in the "img" or the "images" folder inside of your main website folder. your relative link you use in the SRC part of your image tag needs to point to the right place for the image to load on your preview.

  3. check that your extensions match. if you have a PNG image but you try and reference it using a JPEG extension that also won't work. make sure that the extension you use in your HTML code matches the image file extension that's actually there.

Hope this helps,

-Wonder Bread

great poost !

great poost !

</header> <section> <UL> <li> <a href="img/numbers-01.jpg">
<img src="Img/numbers-01.jpg" alt=""> <p>Experminentaton with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photo shop</p> </a> </li> <li> <a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's sytle of glows</p> </a> </li> <li> <a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt=""> <p>/Creating shapes using repitition</p> </a> </li> <li> <a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt=""> <p>Drips created using Photoshop brushes</p> </a>

</header> <section> <UL> <li> <a href="img/numbers-01.jpg">
<img src="Img/numbers-01.jpg" alt=""> <p>Experminentaton with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photo shop</p> </a> </li> <li> <a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's sytle of glows</p> </a> </li> <li> <a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt=""> <p>/Creating shapes using repitition</p> </a> </li> <li> <a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt=""> <p>Drips created using Photoshop brushes</p> </a>