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 Brandon Bobart
Brandon Bobart
128 Points

When I put a relative link in for an image, the image does not display in my preview...Any suggestions?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Travel Charleston | Marketing</title> </head> <body> <header> <a href="index.html"> <h1>Travel Charleston</h1> <h2>Digital Marketing</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="Pricing.html">Pricing</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="blogs.html">Blogs</a></li> </ul> </nav> </header> <section> <img src="IMG/IMG_0297.jpg" alt=""> <p>Rainbow Row</p> <li> <img src="img/IMG_0692.jpg" alt""> <p>Another pic</p>

  </li>

That is the snippet of code I'm referring to

Kent Ã…svang
Kent Ã…svang
18,823 Points

Well, hard to say when you structure your code like that. But try and put in the missing "</section>" - end tag.

2 Answers

Marcin Lubke
Marcin Lubke
13,253 Points
Marcin Lubke
Marcin Lubke
13,253 Points

It's hard to say with your code, it's not complete, but... I think it may be something with your paths and folders structure.

Where do you have your .html file placed, and where are your images? If, for example your .html is in another directory, let's say web/index.html, than you have to use reference to: "../img/image.jpg", if your .html is in your main folder, than you only use "img/image.jpg".

Also, make sure that you use exactly the same file and folder name, CASE SENSITIVE. With some systems, like Windows, it doesn't matter, but on most linux-based systems, file system is case sensitive, so IMG.jpg may be a different file than img.jpg, or even Img.jpg. Make sure you're consistent with your file/folder naming.

Scott French
Scott French
7,383 Points
Scott French
Scott French
7,383 Points

can you post the rest of your code ?

your code is cut off after the section tag also I noticed in you images links you have one in caps and one lowercase also you left out the / in front of your folder paths assuming you have them stored in a subfolder named img Example of what your img tag should look like

<img src="/img/IMG_0297.jpg" alt="Rainbow"><p>Rainbow Row</p></img>

Like Marcin said they are case sensitive 

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>Travel Charleston | Marketing</title> 
  </head> 
  <body> 
      <header> <a href="index.html"> <h1>Travel Charleston</h1> <h2>Digital Marketing</h2> </a> 
          <nav> 
            <ul> 
              <li><a href="index.html">Portfolio</a></li> 
              <li><a href="about.html">About</a></li> 
              <li><a href="Pricing.html">Pricing</a></li> 
              <li><a href="contact.html">Contact</a></li> 
              <li><a href="blogs.html">Blogs</a></li> 
            </ul> 
          </nav> 
      </header> 
    <section> <img src="IMG/IMG_0297.jpg" alt=""> <p>Rainbow Row</p> 
      <li> <img src="img/IMG_0692.jpg" alt""><p>Another pic</p></li>
Marcin Lubke
Marcin Lubke
13,253 Points

Now I see one more mistake, there's a missing equal sign in the last line:

 <li> <img src="img/IMG_0692.jpg" alt""><p>Another pic</p></li>

It should be:

 <li> <img src="img/IMG_0692.jpg" alt=""><p>Another pic</p></li>