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

Posted by Jonathan Martin
Jonathan Martin
Courses Plus Student 1,055 Points

Image won't load!

Hello everyone! I am new on here and as green as you can get with coding and programming so please pardon my ignorance... I tried to do what was suggested in the other posts to fix it and see the picture but in vain. The folder that contains the picture is on my desktop and the index.html file is in that folder, next to the index file of the full website. I tried to put the index file inside the img folder but it didn't work. I'm so confused and feel helpless already and I just started... I have a looong way to go! Sigh... Any help would be much appreciated!

I also am not able to post my code properly... I put the ``` before and after the code but I am not getting the neat black box everyone else is getting. HELP!!!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> I also am not able to post my code properly

Check out this thread on how to type code in the forum hopefully that will help.

7 Answers

William Whitworth
William Whitworth
6,117 Points
William Whitworth
William Whitworth
6,117 Points

Hello Jon,

Don't fret, everything will be fine.

Your website directory structure could look something like this:

/desktop/my_website/
• index.html
• img/
   - img1.jpg
   - img2.jpg
   - img3.jpg
• js/

in order to to display a image on your HTML page (index.html) you'll have to use:

<img src="img/img1.jpg">

Also make sure that you have the right Doctype at the very top of your HTML doc, for HTML5 it is 

<!DOCTYPE html>

and follow with:

<html>
   <head>
   </head>
   <body>
      <img src="img/img1.jpg">
   </body>
</html>

Edit: To display code, use back ticks. On a Macbook they are generally right under the "esc" key, where the "~" key is. so like this: '''code''' except with back ticks and not an apostrophe.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

:+1: This is quite possibly the most succinct answer to this common this I've seen on the forum.

Jonathan Martin
PLUS
Jonathan Martin
Courses Plus Student 1,055 Points
Jonathan Martin
Jonathan Martin
Courses Plus Student 1,055 Points

Hey William!

Thank you so much for taking the time to answer. It looks like I have the same structure -- Desktop>websitewaters-island01-stage01>index.html>img>logo.gif

<body>
    <img src="img/logo.gif alt=Smells Like Bakin">

I did use the back ticks and it didn't work. I used them again above to show you the code I put in for the image (and it worked this time!).

Let me know what you think. I am so confused...

William Whitworth
William Whitworth
6,117 Points
William Whitworth
William Whitworth
6,117 Points

Ahh I see, well... If your markup is identical to the one you have provided above, your issue is with your quotations on the attributes.

<img src="path_to_img" alt="alt_text">
Jonathan Martin
PLUS
Jonathan Martin
Courses Plus Student 1,055 Points
Jonathan Martin
Jonathan Martin
Courses Plus Student 1,055 Points

It worked! Thanks! I followed exactly the video tutorial (so I thought!) but I needed to separate the image and alternate text with the quotation marks... Thanks again for the help!

Ross Rowe
PLUS
Ross Rowe
Courses Plus Student 1,300 Points
Ross Rowe
Ross Rowe
Courses Plus Student 1,300 Points

I am having same issue and nothing I'm doing seems to work. Is it a problem with my code:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> </head> <body> <img src="img/logo.gif" alt="Smells Like Bakin"> </body> </html>

I'm using Sublime Text 2 on a MacBook

UPDATE: Figured it out. Had img folder in wrong directory I guess.

Jonathan Carroll
Jonathan Carroll
3,438 Points
Jonathan Carroll
Jonathan Carroll
3,438 Points

Its 4am for me but just at a quick glance it seems as though you have missed a couple quotations at the end of content="text/html" and also charset="utf-8"

Also after content="text/html" I don't believe you need a semicolon ( ; ) In my own personal experience unless like I said I'm just extremely tired..I don't recall having to end html statements with a semicolon. Typically just the " " on the beginning and ending are how you would close each out.

Semicolons are used to end each statement in CSS as well as to construct JavaScript statements.

Hope this helped and that I didn't lead you in any wrong directions.

Ross Rowe
Ross Rowe
Courses Plus Student 1,300 Points

Sorted. Thanks Jonathan!

Jonathan Carroll
Jonathan Carroll
3,438 Points
Jonathan Carroll
Jonathan Carroll
3,438 Points

Glad to hear it. The good thing I've noticed so far with web languages is most times it's the simplest thing that will fix the issue that feels so big. ;) happy holidays.