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 Add Image Gallery Content

Dirk Carney
Dirk Carney
6,111 Points
Posted by Dirk Carney
Dirk Carney
6,111 Points

Images do not appear in the preview

First, the drag and drop function did not work when I attempted to add them to the workspace. Then, after I uploaded the files individually, the images failed to load in the preview. Below is my code. Please advise as to what I'm missing.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dirk Carney | Designer</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Dirk Carney</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>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt"">
            <p>Experimentation with color and texture.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt"">
            <p>Playing with blending modes in Photoshop.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt"">
            <p>Trying to create an 80's style of glows.</p>
          </a>
        </li>        
        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt"">
            <p>Drips created using Photoshop brushes.</p>
          </a>
        </li>        
        <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt"">
            <p>Creating shapes using repetition.</p>
          </a>
        </li>           
      </ul>
    </section>
    <footer>
      <p>&copy; 2014 Dirk Carney.</p>
    </footer>
  </body>
</html>

3 Answers

Ben Dietrich
Ben Dietrich
8,287 Points
Ben Dietrich
Ben Dietrich
8,287 Points

Dirk,

Are the images themselves located in the img folder? Your code appears to be error-free.

Dirk Carney
Dirk Carney
6,111 Points
Dirk Carney
Dirk Carney
6,111 Points

Thanks for your reply, Ben.

Yes, the images are in the img folder. I extracted them from the zip file, and I can see them in the sidebar of the workspace.

After they failed to appear using the drag and drop method in my initial attempt, I uploaded each image, one at at time. When doing so, a "[1]" was automatically added to the end of each file name, as if the drag and drop had worked earlier despite being invisible within the sidebar.

For example, "facebook" became "facebook[1]." This seemed similar to what happens when downloading a file twice from the same source. A suffix like "[1]" is added to each file as a way of differentiating them.

To be clear, I did rename each file by removing the "[1]" from the end of all the file names. The code matches the original, and now the current, file names.

Example:

numbers-09.jpg

<a href="img/numbers-09.jpg" alt"">

Dirk

Dirk Carney
Dirk Carney
6,111 Points
Dirk Carney
Dirk Carney
6,111 Points

Ben,

I figured out the problem. When the files were uploaded individually, they were missing the file extension names (.jpg, .png). It's working now.

Dirk

Ben Dietrich
Ben Dietrich
8,287 Points
Ben Dietrich
Ben Dietrich
8,287 Points

Great to hear it was something small Dirk. I can't tell you how many times I've encountered problems because of simple mistakes like typos, forgetting semi-colons or omitting file extensions! Rather have it be that than something major!