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

Image/Logo Doesn't show up

Newbie here. I put the <img src="im/logo.gif" alt="Smells Like Bakin"> but the Logo doesn't show up in the browser. A box shows up, but no Logo. Help please. Looks like I am having problems pointing to the image?I think?

15 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

faitasi utu The folder and your HTML document would need to be adjacent or "siblings" in the file tree. Your directory structure should look something like this:

index.html
images (folder)
    |_ myimage.jpg
    |_anotherimage.jpg
css (folder)
    |_style.css

The relative file path given will not work if, for example, your HTML document was nested inside your images folder.

More than likely your url to the image is broken.

With more info, we could be more specific.

I am sure that is it, because I don't know what you are talking about. : )
Here is the site I am practicing on...file:///C:/Users/faitasi/Desktop/index.html How/where do I find the url to the image to make it come up on the page? Not sure if I am asking the question correctly.

It depends on where your image is. Your index.html file is on your desktop, lets say your image was on the desktop too.

Then your image source would look something like:

<img src="C:/Users/faitasi/Desktop/myimage.jpg" alt="">

To ensure I get the right path, I would right click the file and in the properties viewer, copy and past the path the computer gives you to the image or file.

And finally, how you are building a site is fine for right now, but if you're going to launch live, I highly recommend you install a local server on your machine. I use XAMPP on my PC, and MAMP on my Macbook Pro. It'll make your life so much easier developing a site that you plan to launch live. There are videos on here on how to download and set up, and use the programs. It's free software.

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Hi faitasi utu,

You could use an absolute path as Kevin Korte described, but I recommend you use a relative path. In other words, you only specify the file path relative to the location of your document. If your HTML document is at the same depth as a folder called images, and your image file was inside that folder, your path might look something like this:

<img src="images/myimage.jpg" alt="">

This is much easier to maintain, because if you move your entire website to another folder, your images and links to other files will stay intact. With absolute file paths, you have to change everything on your website, which can be a real pain when you try to upload it to a server.

Thanks guys. Will work on it, and let you know if I get it right.

Hey Nick Pettit, I'm assuming they do, but do relative links work when just pointing your browser at a file on your computer, instead of using a localhost?

Nick Pettit, <img src="images/myimage.jpg" alt="" is what I typed in. I understand what you are getting at, but I don't understand what you mean by same depth, "If your HTML document is at the same depth as a folder called images, and your image file was inside that folder, your path might look something like this:"

Kevin Korte, Worked just like you said. Thanks.

Nick Pettit Sweet! Learn something new everyday.

faitasi utu Relative links are the way to go than. I didn't realize they work without server software.

Nick Pettit, Ok, I get it. But I am missing the part on how to do the directory structure. I got Sublime text(PC)and started a new file index.html. How would I do the adjacent/siblings to do a directory structure? Is there is a video, or article, I guess I must have missed it. Thanks for the help.

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

faitasi utu You could just do it in the Windows file explorer (or the Finder if you're on a Mac). Sublime is simply a glimpse into your local file system, so any changes made will be reflected in both places.

Thanks for the Help Nick

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

No problem! If you have any more questions, feel free to ask. :)