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

Posted by Leila Hidding
Leila Hidding
466 Points

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

miikis
miikis
44,957 Points

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?

Greg Debres
Greg Debres
13,086 Points
Greg Debres
Greg Debres
13,086 Points

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

miikis
miikis
44,957 Points

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

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

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

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

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.

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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!

miikis
miikis
44,957 Points

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

Jess F
Jess F
1,824 Points
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.

Leila Hidding
Leila Hidding
466 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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>

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

I still can't view the img.

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
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
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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?

miikis
miikis
44,957 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

I downloaded the treehouse files.

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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.

miikis
miikis
44,957 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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

miikis
miikis
44,957 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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

miikis
miikis
44,957 Points

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.

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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.

miikis
miikis
44,957 Points

Can you post your entire code? Like everything?

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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

miikis
miikis
44,957 Points

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.

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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

Rich Bagley
Rich Bagley
25,869 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
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>&copy; 2014 Leila Hidding.</p>
    </footer> 
   </body>
</html>
miikis
miikis
44,957 Points

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

Leila Hidding
Leila Hidding
466 Points
Leila Hidding
Leila Hidding
466 Points

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

miikis
miikis
44,957 Points

No problem. Good luck.

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

Mine was here :)