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 Elizabeth Eymann
Elizabeth Eymann
12,209 Points

I can't get the image to appear

When I click on the preview button in workspace, I can't see the "<img src="img/numbers-01.jpg" alt="">" image. I put the code in exactly like the video. What did I do wrong?

Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta charset= "utf-8">
    <title> Liz | Designer </title>
  </head>
  <body>
    <header>
      <a href= "index.html">
        <h1> Liz </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; 2015 Liz. </p>
    </footer>
    </body>
    </html>
Rich Bagley
Rich Bagley
25,869 Points

Also, just updated your question so the code is wrapped in markdown tags. Just makes it a little easier to read that's all :)

-Rich

3 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi Elizabeth,

I can see a couple of extra spaces in your code which whilst not directly associated with the image may have an odd affect...and if not it's good to catch them now anyway :)

<meta charset= "utf-8">

Remove the extra space after the = so it becomes:

<meta charset= "utf-8">

This line also has the same issue:

  <a href= "index.html">

and would become:

  <a href="index.html">

Aside from that, if the image is not appearing, do you have a jpg image named numbers-01 within an img folder (exactly - with no different casing)?

-Rich

Elizabeth Eymann
Elizabeth Eymann
12,209 Points
Elizabeth Eymann
Elizabeth Eymann
12,209 Points

Problem solved! I had saved my "img" file as "IMG". I changed it to lower-case and now the image appears! I didn't realize it was cap sensitive.

Thanks!

Rich Bagley
Rich Bagley
25,869 Points

No problem, glad you got it sorted :)

-Rich

Josh Preston
Josh Preston
1,610 Points
Josh Preston
Josh Preston
1,610 Points

Thanks for this...this was my exact problem as well. Perhaps it may be a good idea to note that code is case sensitive!

I don't think I have heard that so far in the tutorials. Loving it so far though.

-JP