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 Structure the Image Gallery

Hi, 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>&copy; 2014 Leila Hidding.</p>
</footer> 


</body>

</html>

22 Answers

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?

Make sure you close the image tag with > after alt""

haha or that. I swear I always read so much deeper into it that I need to. Nice catch brother

and 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...

Hmm 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>&copy; 2014 Nick Pettit.</p>
    </footer>
  </body>
</html>

That's the project file code.

I 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 :)

It 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!

Ha it's always the smallest things. Glad you figured it out though. Happy learning :)

Jess F
Jess F
1,824 Points

I 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.

haha it was driving me crazy but glad to have people on the forum ready to help!

Ok thanks for both answers. I'm gonna try it out!

I 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>

I still can't view the img.

<!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>

I 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?

Did you download the project files from Treehouse or did you just start from scratch?

I downloaded the treehouse files.

Dragged 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.

Did you modify the index.html file in any way?

The word "portfolio" I wrote projects at first but then I changed it back to portfolio.

The text inside the tags would not matter, in this case.

Maybe i should go through it all over again because up to this point the code was working fine.

I 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.

I 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.

Can you post your entire code? Like everything?

Thanks for your time! I'll let you know if it works.

I paste the whole code but when I post the answer it doesn't show the whole code.

In 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.

Hi Rich, I already did that but it still won't view.

Sorry, I'd missed that answer at the top.

<!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>&copy; 2014 Leila Hidding.</p>
    </footer> 
   </body>
</html>

Your code is fine. It should work. I don't know why it wouldn't.

Thanks for helping Mikis! I'll just go through it again and maybe I'll figure it out.

No problem. Good luck.

Goran Penov
Goran Penov
1,635 Points
<section>
      <ul>
        <li>
          <img src="Img/numbers-01.jpg" alt="">
        </li>
      </ul>
    </section>

Mine was here :)