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
jason schott
Courses Plus Student 1,352 PointsGetting 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
Danielle Aristizabal
10,438 Pointsok... 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
35,844 PointsWhat does your image tag look like?
jason schott
Courses Plus Student 1,352 PointsHere 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>
jason schott
Courses Plus Student 1,352 PointsWell 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
35,844 PointsAnchor 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.
jason schott
Courses Plus Student 1,352 PointsIs that not what <?a> is after my paragraph?
Nathan Brenner
35,844 PointsYou are correct on that, which means there's probably an issue with the path.
Nathan Brenner
35,844 PointsDoes it work if you indent the <p> tag so it is lined up with the <img?
jason schott
Courses Plus Student 1,352 PointsThanks how do I find the issue with my path? Sorry newbie at this.
Nathan Brenner
35,844 PointsI 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.
Danielle Aristizabal
10,438 PointsAll 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!
jason schott
Courses Plus Student 1,352 PointsI 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?
Danielle Aristizabal
10,438 PointsComputers 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.
jason schott
Courses Plus Student 1,352 Pointshttps://teamtreehouse.com/workspaces/5587692#
Thanks for the help I have been trying to figure this out for an hour.
Danielle Aristizabal
10,438 PointsIs your li within a ul?
jason schott
Courses Plus Student 1,352 PointsI think so but really (First day) so not positive.
Danielle Aristizabal
10,438 PointsThings 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.
jason schott
Courses Plus Student 1,352 Pointswould it be easier if I copied and pasted all of it?
Danielle Aristizabal
10,438 Pointsyes
Danielle Aristizabal
10,438 PointsThe 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.
jason schott
Courses Plus Student 1,352 PointsLast 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
Danielle Aristizabal
10,438 PointsI see that Header, sections and footer should be within a body tag
Danielle Aristizabal
10,438 Pointsis numbers-06.jpg the only picture that shows up as an X for you or is it all of them?
jason schott
Courses Plus Student 1,352 PointsNo pictures show. I will check I did not capitalize. Thanks
Danielle Aristizabal
10,438 PointsSorry! 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.
jason schott
Courses Plus Student 1,352 PointsCompletely 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.
jason schott
Courses Plus Student 1,352 PointsCompletely 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.
Danielle Aristizabal
10,438 PointsNo 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.