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

Posted by Matthew Landers
Matthew Landers
144 Points

Basic src img question

Hello,

I am having difficulty getting my Smells Like Bakin logo to display.

My index.html file is in a folder. Also in that folder is another folder called Smells Like Bakin 1

In the Smells Like Bakin 1 folder is another folder called img

In the img folder there is a logo.gif file

The logo.gif is the image I want to display.

If someone could explain what is incorrect about the below code, it would be very much appreciated.

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

Thanks in advance for your help.

Matthew Landers
Matthew Landers
144 Points

Sorry the code did not paste. Here it is:

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

3 Answers

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

you need to remove the single quote from the end of the alt attribute. when wrapping quotes around an attribute's value you can use either double or single quotes interchangeably, so when you added the single quote/apostrophe to the end of " bakin' " it confused the browser because it thought you where opening a quote without closing it. you can use character sets to display apostrophes with it's entity name &apos; if you like.

Matthew Landers
Matthew Landers
144 Points

Hey Elliott,

That didn't seem to do it.

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

This doesn't work?

<img src="SmellsLikeBakin1/img/logo.gif" alt="Smells Like Bakin">
Matthew Landers
Matthew Landers
144 Points

For some reason it is still showing that broken image.

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

Try it with the spaces now.

 <img src="Smells LikeBakin 1/img/logo.gif" alt="Smells Like Bakin">
Matthew Landers
Matthew Landers
144 Points

My apologies Elliot. I have discovered the source of the issue.

When I downloaded the images they were in a zipped folder. When I moved the images to a regular folder it displayed.

Thanks again.

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

No problem! I'm glad you have it working. :)

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points
Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

your alt Attribute ends with a single quote instead of a double like it started with.

Matthew Landers
Matthew Landers
144 Points

Thanks for your response Elliot.

That did allow for something display, although it shows a broken image as opposed to the logo.

Marshall Wells
Marshall Wells
2,044 Points
Marshall Wells
Marshall Wells
2,044 Points

I wonder if it has to do with the fact you have spaces in the folder name? Id try it with the spaces taken out just to see if thats the problem or you might have to double quote it like ""Smells Like Bakin 1"/img/logo.gif" i think you typically want to use underscores instead of spaces in file names and folder names

Matthew Landers
Matthew Landers
144 Points

Thanks Marshall. I tried removing the spaces but still no luck.

Below is the full code. This might bring additional insight I may have omitted.

<!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="SmellsLikeBakin1/img/logo.gif" alt="Smells Like Bakin'">
</body>
</html>