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

Posted by Paul Hernandez
Paul Hernandez
166 Points

my picture is not showing on preview

My picture is not showing on preview

5 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Can you include your code, both html and css? Then we can help you figure out what might be wrong. :-)

Paul Hernandez
Paul Hernandez
166 Points

<section> <ul> <li> <img src="img/numbers=01.jpg" alt=""> </li> </ul>
</section>

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

Hi,

You used this relative file path img/numbers-01.jpg to access your image. For this to work, the img folder would have to be located in the same folder that your index.html file is located. Similarly, the actual image file would have to be located in the img folder and be named so: numbers-01.jpg.

Did you check that all of this is true...and still the image won't display?

If this is the case, you should understand that, regarding file navigation with relative file paths:

  1. the backslash (/) means to go, from the current folder you are in, into a folder that is one level deeper
  2. the two dots followed by a slash (../) mean to go up one level from where you currently are

The other way to declare file paths is the Absolute file path. This is akin to the links you would see in your browser's search, Google's Search Display Pages et al. It looks like this http://www.teamtreehouse.com.

Relative paths are for navigating inside a local environment. Absolute paths are used for access to...not local environments; i.e. other servers.

Hope this helps.

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Your image file should be img/numbers-01.jpg, but you have a = instead of - . Should be a quick fix!

Paul Hernandez
Paul Hernandez
166 Points

That didn't fix it there's a little picture of a were it should be. but i think that little picture means its not downloading.

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Usually when that happens to me, it's because there was an error in the code. Is the folder that the file is in named img or is it image?

Paul Hernandez
Paul Hernandez
166 Points
Paul Hernandez
Paul Hernandez
166 Points

img

Sean Schlimgen
Sean Schlimgen
7,100 Points
Sean Schlimgen
Sean Schlimgen
7,100 Points

If you added a /before img does that help?

<img src="/img/numbers-01.jpg" alt="">
Paul Hernandez
Paul Hernandez
166 Points

On the preview there's a little picture of a little green mountain