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

Bakin Logo won't show up on browser

I followed the instructions in the video very carefully and saved the project files to my computer, and then typed in the code as such:

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

and for some reason when I refresh the web page the image won't load it just has a little box with a broken picture file icon in it.

please help, I'm running mac OSX

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

The forum uses markdown to correctly format code, check out this thread on how to type code in the forum for some examples.

4 Answers

It's probably an image path issue. In chrome on osx you should see a little red alert on the bottom left of the screen if there is errors on the page such as a missing image. You an also look at the logo element using the web inspector:

  1. control + click on the logo missing file icon and select Inspect Element
  2. Click on the url in the elements tab for the image and make sure it's correct

Sometimes just opening up the image in the browser helps with the path.

Your code didn't show up. Try putting the first three back ticks followed by html on its own line. Then put the code on the next line. At the bottom put your three closing back ticks.

Actually, the image url is NOT img/logo.gif. If you go to Codepen, you'll see that the image url is actually http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/logo.gif, so the code should look like this:

    <img src = "http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/logo.gif" alt = "Smells Like Bakin"/>

(the slash at the end of the img tag is optional)

> image url is NOT img/logo.gif

If you download the files to your computer and are using relative paths it is.

> the slash at the end of the img tag is optional

The slash is required in XHTML4 but not in HTML 5.

Ok. I didn't know that. Thank you for the input.

Just so you know, you can format code by adding 4 spaces before each line of code, and giving it one line of space above and below it. To format inline code, add three backticks before and after the code. The backticks are, on a normal keyboard, on the left of the "1" key. (These formatting tips are just the ways I currently know.) Here's an example of block code:

    <p>This is code!</p>

And here's an example of inline code: <p>This is code!</p>