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

Ingrid Bardales
Ingrid Bardales
10,616 Points
Posted by Ingrid Bardales
Ingrid Bardales
10,616 Points

adding image

I feel soo dumb, I'm trying to build a small site for a friend and NOTHING is going right, what a horrible feeling! I've done this tons of times before but this time it's not working, I'm trying to add an image of a doghouse but i don't see it when i compile it. could you guys please help~

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
    <title>The-Pet-and-Grooming-House</title>
     <link rel="stylesheet" href="normalize.css" type="text/css"> 
     <link rel="stylesheet" href="main.css" type="text/css"> 
   </head>
 <body>
  <div class="main-wrapper">
   <div class="main-header"> 
    <header>
      <h1>The Pet House</h1>
      <img src="pics/doghouse.png" alt="doghouse">

15 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Your HTML files should be one folder up.

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hi Dustin, it's me Ingrid again. I was wondering if you could me with two more things on my site? If you don't have time i understand. But if you go I am so greatfull! I downloaded two fonts, added my @font-face and changed the name and made sure i used it when i called it in my h1 declaration but i don't see anything. Second issue is my navigation, i can't get it to set it to the full width and height of the .main-wrapper, I've tried and no results. Let me know what i need to do just like before. By the way i followed you on twitter, I'm olmc1. like i said if you don't have time, I will understand. But if you do THANK YOU!!! and i've provided the link to dropbox below. Please feel free to critique and give any tips or suggestions.

Thanx a million in advance! Ingrid

https://www.dropbox.com/sh/xl3lofdbutwsg89/AADWh8nmUpGo7i4l8pGGnMLKa?dl=0

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Ingrid,

Your code looks fine, as far as calling in an image goes. Have you verified that the filename, location, and extension are all correct?

Erik

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

My root folder is TheHousePet then i have the Pics folder and inside there i have the doughouse.png

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

If this HTML file and the Pics folder both live in the same root folder, then your path is correct. Next up is to check that spelling and capitalization for both the folder and the image itself are correct.

Erik

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

So what I've put below is the correct folder structure and spelling/capitalization of everything?

TheHousePet (folder)

->index.html (file you're trying to call the image from)

->pics (folder)

->->doghouse.png

Erik

Suleyman Kolanci
PLUS
Suleyman Kolanci
Courses Plus Student 13,741 Points
Suleyman Kolanci
Suleyman Kolanci
Courses Plus Student 13,741 Points

well from what i see you need to get the right html structure first

<!DOCTYPE html> <html> <head></head> <body> <img src="url("img/example.jpg)"/> </body> </html>

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Ingrid,

This answer may have been posted prior to your code being posted correctly. Your doctype declaration is correct.

Erik

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Hi Ingrid, make sure your image is located (spelled exactly—case sensitive ): pics/doghouse.png.

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hey Dustin, yes I've doubled and triple check and it's just as you have it And i have it in my code

Dustin Matlock
Dustin Matlock
33,856 Points

Can you zip the project and upload it to Dropbox or a similar service?

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

ok, Dustin, I'm going to open an account in Dropbox

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hi Dustin, I uploaded my file to Dropbox, how do i invite you?

Dustin Matlock
Dustin Matlock
33,856 Points

Ingrid, try this link.

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

ok, i moved the HTML files one folder up

Dustin Matlock
Dustin Matlock
33,856 Points

That's it. Should be working. :smiley:

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Should i have changed my HTML? I tried to re-view it in Sublime but i get the broken image icon again.

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

OK OK OK!!!!!! I GOT IT!!!!

      <h1>The Pet House</h1>
      <img src="../pics/doghouse.png">
    </header>
Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

AWWW Dustin thanks!!! Is this the way i should order my folders from now on?

Dustin Matlock
Dustin Matlock
33,856 Points

Generally, I would recommend something more like this. Also, be careful with capitalization of file names and directories. Most web servers are Linux, and so that matters. Glad you got it worked out! :smiley:

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

ok got it, thanks so much!

Dustin Matlock
Dustin Matlock
33,856 Points

You're welcome. Good luck with the website.