Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Creating HTML Content Structure the Image Gallery

Elizabeth Eymann
Elizabeth Eymann
12,196 Points
Posted by Elizabeth Eymann
Elizabeth Eymann
12,196 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,868 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,868 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,196 Points
Elizabeth Eymann
Elizabeth Eymann
12,196 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,868 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