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 trialLeila Hidding
466 PointsHi, I can't view the image. It's a question mark right now when I view it. Could someone help me out? Thanks!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Leila Hidding | Social Entrepreneur</title> </head> <body> <header> <a href="index.html"> <h1>Leila Hidding</h1> <h2>Social Entrepreneur</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-01.jpg" alt=""
</li>
</ul>
</section>
<footer>
<p>© 2014 Leila Hidding.</p>
</footer>
</body>
</html>
22 Answers
miikis
44,957 PointsHi,
You used this file path img/numbers-01.jpg
to access your image. For this to work, the img
folder would have to be located in the same folder that your index.html
is located. Similarly, the actual image file would have to be located in the img
folder and be named so: numbers-01.jpg
.
Did you check that all of this is true...and still the image won't display?
Greg Debres
13,086 PointsMake sure you close the image tag with > after alt""
miikis
44,957 Pointshaha or that. I swear I always read so much deeper into it that I need to. Nice catch brother
miikis
44,957 Pointsand it still won't work? Did you purposely not include the html tag in your question? Because, after your DOCTYPE
declaration, you would need to wrap the entire html
in a
<html></html>
tag...
miikis
44,957 PointsHmm if so, then it should work perfectly...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Nick Pettit</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="img/numbers-01.jpg" alt="">
</li>
</ul>
</section>
<footer>
<p>© 2014 Nick Pettit.</p>
</footer>
</body>
</html>
That's the project file code.
miikis
44,957 PointsI think it's not working because you don't have a head
element, or a body
element for that matter. This is different than the header
element, in case you were wondering.
Both are essential and could be causing your troubles.
UPDATE: you also don't have a html
element. Try adding these tags and see if it works...because it then has to work :)
Leila Hidding
466 PointsIt finally works Mikis! As you wrote earlier:
Hi,
You used this file path img/numbers-01.jpg to access your image. For this to work, the img folder would have to be located in the same folder that your index.html is located. Similarly, the actual image file would have to be located in the img folder and be named so: numbers-01.jpg.
Did you check that all of this is true...and still the image won't display?
I named the folder Img (capital letter) instead of img!
miikis
44,957 PointsHa it's always the smallest things. Glad you figured it out though. Happy learning :)
Jess F
1,824 PointsI had this same exact issue and could not for the life of me figure out what was wrong...same exact thing, I had capitalized "I" in "Img" when naming the folder lol! Thank you for sharing, I don't know how long that would have taken me to figure out.
Leila Hidding
466 Pointshaha it was driving me crazy but glad to have people on the forum ready to help!
Leila Hidding
466 PointsOk thanks for both answers. I'm gonna try it out!
Leila Hidding
466 PointsI closed the image tag and I went through the whole code again exactly how Nick instructs it. (the images are in the image folder leaving the index.html outside the img folder ).
My code looks like this now:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Leila Hidding | Social Entrepreneur</title> </head> <body> <header> <a href="index.html"> <h1>Leila Hidding</h1> <h2>Social Entrepreneur</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-01.jpg" alt=""> </li> </ul> </section> <footer> <p>© 2014 Leila Hidding.</p> </footer> </body> </html>
Leila Hidding
466 PointsI still can't view the img.
Leila Hidding
466 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Leila Hidding | Social Entrepreneur</title> </head> <body> <header> <a href="index.html"> <h1>Leila Hidding</h1> <h2>Social Entrepreneur</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-01.jpg" alt=""> </li> </ul> </section> <footer> <p>© 2014 Leila Hidding.</p> </footer> </body> </html>
Leila Hidding
466 PointsI can't seem to copy paste the whole code anymore.
The only thing I can't view is the image. Up until now everything seemed to work when I check it out after the instructions. The image is the only thing not working. Maybe I'm doing something wrong but I can't seem to figure it out.
Any tips?
miikis
44,957 PointsDid you download the project files from Treehouse or did you just start from scratch?
Leila Hidding
466 PointsI downloaded the treehouse files.
Leila Hidding
466 PointsDragged them into the workspace window where it says drop files to upload. made a folder and named it img. dragged all the images into that folder and only left out the index.html one.
miikis
44,957 PointsDid you modify the index.html
file in any way?
Leila Hidding
466 PointsThe word "portfolio" I wrote projects at first but then I changed it back to portfolio.
miikis
44,957 PointsThe text inside the tags would not matter, in this case.
Leila Hidding
466 PointsMaybe i should go through it all over again because up to this point the code was working fine.
miikis
44,957 PointsI agree...maybe watch the video again. The structure of a typical html file goes like this:
DOCTYPE + html ---> head + body (doctype, then a html that wraps a head and a body)
Without this it won't work.
Leila Hidding
466 PointsI have all three of them in the code (head, header, body).
I'll look into it again, maybe I'm just not seeing something. I'm very new to this all.
miikis
44,957 PointsCan you post your entire code? Like everything?
Leila Hidding
466 PointsThanks for your time! I'll let you know if it works.
Leila Hidding
466 PointsI paste the whole code but when I post the answer it doesn't show the whole code.
miikis
44,957 PointsIn the text box that you're typing your post in, there is a link called "Markdown Cheatsheet," use the method in the section named "code" to post your code in its entirety.
Leila Hidding
466 PointsHi Rich, I already did that but it still won't view.
Rich Bagley
25,869 PointsSorry, I'd missed that answer at the top.
Leila Hidding
466 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leila Hidding | Social Entrepreneur</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Leila Hidding</h1>
<h2>Social Entrepreneur</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-01.jpg" alt="">
</li>
</ul>
</section>
<footer>
<p>© 2014 Leila Hidding.</p>
</footer>
</body>
</html>
miikis
44,957 PointsYour code is fine. It should work. I don't know why it wouldn't.
Leila Hidding
466 PointsThanks for helping Mikis! I'll just go through it again and maybe I'll figure it out.
miikis
44,957 PointsNo problem. Good luck.
Goran Penov
1,635 Points<section>
<ul>
<li>
<img src="Img/numbers-01.jpg" alt="">
</li>
</ul>
</section>
Mine was here :)