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

Posted by Nathan Doerr
Nathan Doerr
336 Points

Adding Images to the website

When adding images to the website, I had followed along through the entire tutorial. I downloaded the zipfile provided. The images showup on the side toolbar within the workspace. When previewing the site. the images do not show up, instead on the website it shows the captions with a small icon the Pictures from the files do not show up, and when I press the icon it says 'ERROR 404." What could the problem be?

...... Image problem

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nathan Doerr | Guitar</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>NATHAN DOERR</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="image/numbers-01.jpg" alt="">
            <p>Experimentation with color and texture.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="image/numbers-02.jpg" alt="">
            <p>Playing with blending modes in photoshop.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="image/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="image/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg">
            <img src="image/numbers-12.jpg" alt="">
            <p>Creating Shapes using repitition.</p>
            </a>
        </li>   
      </ul>
    </section>
    <footer>
      <p>&copy;| 2014 Nathan Doerr.</p>
    </footer>
  </body>
</html>
Geoff Parsons
Geoff Parsons
11,679 Points

Nathan, looks like you might need to add the Markdown syntax for a code block around that. Just add 3 back ticks before and after the code block on its own line. That's the key above tab (usually) with a tilde (~) on it as well. That'll make all your markup show up correctly. Such as:

  <p class="greeting">Hello!</p>
Geoff Parsons
Geoff Parsons
11,679 Points

Close but you actually want three of the backtick character itself: ```

4 Answers

Geoff Parsons
Geoff Parsons
11,679 Points
Geoff Parsons
Geoff Parsons
11,679 Points

Looks like your image tags and anchor tags have different paths to the images.

  <a href="img/numbers-02.jpg">
    <img src="image/numbers-02.jpg" alt=""> 
  </a>

Either the href attribute on the anchor or the src attribute on the image needs to be changed to match its counterpart i believe.

Nathan Doerr
Nathan Doerr
336 Points
Nathan Doerr
Nathan Doerr
336 Points

I am working it in the Workspace right along side the video. The files were downloaded on the same page as the lesson. Following all of Nick Pettits instructions form for form should make everything turn out the same if I am correct. I downloaded the pictures and followed the instructions as to where to put them. Should this issue still be occurring? When coding the photos are they pulling the actual computer or from the place within the workspace?

Geoff Parsons
Geoff Parsons
11,679 Points

The photos will be loaded from within the workspace so you'll have to upload the photos to the workspace as Nick shows in this video. After that the markup you have should work just fine.

Nathan Doerr
Nathan Doerr
336 Points
Nathan Doerr
Nathan Doerr
336 Points

is it showing up correctly?

Geoff Parsons
Geoff Parsons
11,679 Points

Close enough! May need a blank line above it though - sometimes it gets confused when another line of text runs into the code block I've noticed.

Nathan Doerr
Nathan Doerr
336 Points
Nathan Doerr
Nathan Doerr
336 Points

thank you for the quick response here is the edits. When checking the preview screen the physical picture still does not show up.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nathan Doerr | Guitar</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>NATHAN DOERR</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 repitition.</p>
            </a>
        </li>   
      </ul>
    </section>
    <footer>
      <p>&copy;| 2014 Nathan Doerr.</p>
    </footer>
  </body>
</html>
Geoff Parsons
Geoff Parsons
11,679 Points

Everything looks fine from here. Are you by chance working on this in a workspace alongside the videos? It may just be the case that the images you're referencing don't exist.