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

Getting images to show on HTML

I can only get an X in a box instead of pictures what should I check. The data is loaded in a new file IMG so not sure

24 Answers

ok... so I replaced my code with yours and the pictures show up just fine so it isn't your HTML.... I looks like you do not have your picture files inside your img folder or you don't have it named right maybe you capitalized the "I"?

Nathan Brenner
Nathan Brenner
35,844 Points

What does your image tag look like?

Here it is: <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create and 80's style of glows</p> </a> </li>

Well that's not right:

That is what my page shows though.. I tried to break the first line is closed brket

    <li
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
        <p>Trying to create and 80's style of glows</p>
        </a>
    </li>
Nathan Brenner
Nathan Brenner
35,844 Points

Anchor tabs need closing tags need a closing tag, so after your <img> add </a>. If the image still doesn't show, there's probably a typo with the path to the image.

Is that not what <?a> is after my paragraph?

Nathan Brenner
Nathan Brenner
35,844 Points

You are correct on that, which means there's probably an issue with the path.

Nathan Brenner
Nathan Brenner
35,844 Points

Does it work if you indent the <p> tag so it is lined up with the <img?

Thanks how do I find the issue with my path? Sorry newbie at this.

Nathan Brenner
Nathan Brenner
35,844 Points

I looked at the path, and it looks fine. What you have in the href for the anchor tag should be the same as what you have in the img src.

All it is, is that the first <li> tag wasn't closed properly. You only have <li when it should be <li>. This is why the first < in the <a is orange.

they way you have it here the browser reads it as <li a href="img/numbers-06.jpg">

because it is waiting for a closing tag which is messing it all up. Making that change should fix it.

good luck!

I removed it s you could see the code I wrote. In the program it is actually in there. Thanks for the response though. Question does your img file need to be above or below your index file or does it matter?

Computers usually automatically put folders on top then files below them. However, I do not this is matters as long as both are contained within the same folder. Now, if you have your HTML file in a folder then you would need to add ../ to the path when you are adding the source and the href.

Can you send me a link to your work space. I can see if I can find your error.

https://teamtreehouse.com/workspaces/5587692#

Thanks for the help I have been trying to figure this out for an hour.

Is your li within a ul?

I think so but really (First day) so not positive.

Things to check for:

-Make sure your image is still in the img folder. Since we are telling the browser to look in there. The part of the file path img/ tells the browser to look for folder img then look inside that folder.

You should several li sections with the code you posted(one for each picture in the gallery) nested inside one ul which is nested inside a section tag. one for each picture in the gallery.

would it be easier if I copied and pasted all of it?

yes

The link to your workspace isn't working for me. neither is pasting code in... i was trying to put in what it should look like.

Last line I opened so it can be viewed

<html> <head> <meta charset="utf-8"> <title>Jason Schott | Photgrapher</title> </head> <body> <header> <a href="index.html"> <h1>Jason Schott</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="index.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experiment 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 Photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create and 80's style of glows</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes</p> </a> </li> <li> <a href="img/numbers-012.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a> </li> </ul> </section> <footer> <p>© 2014 Jason Schott.</p>
</footer> </body> </html

I see that Header, sections and footer should be within a body tag

is numbers-06.jpg the only picture that shows up as an X for you or is it all of them?

No pictures show. I will check I did not capitalize. Thanks

Sorry! I went to bed. Did you make sure all of the picture files are in the img folder and the html file outside that folder? Did you make sure to add the body tags? You are also missing the Doctype. But even with those code errors the preview in the work space the images so it must be something with the images and their placement in the file structure.

Completely understand. I actually changed browsers for IE to google and everything worked. Thanks for all the help and sorry i did not notice anything saying not to use IE until i was looking at others questions around the same topic.

Completely understand. I actually changed browsers for IE to google and everything worked. Thanks for all the help and sorry i did not notice anything saying not to use IE until i was looking at others questions around the same topic.

No worries!!! Chrome is a great browser. IE is a pain in the butt when it comes to development. I read that Microsoft is ditching IE soon. All web developers and designers are very happy about this. If you can mark one of my answers as best answer that would be awesome! ;-) Let me know if you get stuck again. I'm happy to help.