I am really confused on how to add an image in the basic website section. I am using Notepad++. Every time I try to view my work in Chrome or Firefox there is no picture. I am trying to upload a picture from my laptop. But it's not working. Here is the code I am using: When I try to put my own picture in I just replace the word cupcake with the name of the picture I wanted to put in. I have tried googling it, but it doesn't work. Can someone please help me? Thank you! I got the pictures in.

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

Posted June 4, 2013 1:39am by

Adding an Image in HTML

I am really confused on how to add an image in the basic website section. I am using Notepad++. Every time I try to view my work in Chrome or Firefox there is no picture. I am trying to upload a picture from my laptop. But it's not working. Here is the code I am using: <img src="image/cupcake.jpg" alt="Smells Like Bakin"/> When I try to put my own picture in I just replace the word cupcake with the name of the picture I wanted to put in. I have tried googling it, but it doesn't work. Can someone please help me?

Thank you! I got the pictures in.

7 Answers

June 5, 2013 2:10am

Is the picture that you want to use (your own picture) also in the same folder as your index.html file?

June 6, 2013 2:30am

ok i got 4 of the pictures in! thank you!

June 6, 2013 2:30am

ok i got 4 of the pictures in! thank you!

June 6, 2013 2:31am

\o/ !!!

^__^

June 4, 2013 1:40am

You can display your code by wrapping it in " `` "

June 4, 2013 1:54am

If your index.html file is in the the same folder as your image.jpg file then you can use relative path in the img src attribute. When you double click on the index.html it should open in your default browser and bring up the image. You may also need to refresh.

<img src="image.jpg">

June 4, 2013 1:57am

Be sure to put your image in the same folder your index.html file is. otherwise it cannot locate the image.

Hope this helps!

June 4, 2013 6:27pm

I put everything in the same folder. Downloaded all the pictures from the lessons. If everything is in the same file why won't they show up? Please help.

June 4, 2013 9:20pm

It sounds like everything should work as is. Do you have the link to the lesson you're referring to?

June 5, 2013 4:17pm

http://teamtreehouse.com/library/websites/build-a-simple-website/text-editors-and-html/images-and-lists

June 5, 2013 4:25pm

According to the html file, your image should be in the folder called 'img'. The html tag would look like so... <img scr="img/your_image.jpg">

June 5, 2013 4:30pm

Here's my code so far: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content=text/html; charset=ut f-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.jpg" alt="Smells Like Bakin"> </div> <div class="grid_8 omega" <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes<a/></p> </div> <div class="grid_3" omega> <img src="img/You-Bake-Me-Blush.jpg" alt="You Bake Me Blush"> </div>

    <div id="featured-cupcake" class="grid_7">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake<a/>. It's strange combo of flavors will kick your taste buds into fiesta mode!</p>
            <img src='img/featured-cupcake.jpg' alt="Avocado Chocolate Cupcake">
    </div>

    <div id="new-cupcakes" class="grid_5 omega">
    <h2>Fresh Out the Oven</h2>
    <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href=#>Jalapeno So Spicy">
    <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy"> 
    <img src="img/new-cupcake-jalapeño.jpg" alt="Jalapeno">
    </div>


    <div class="grid_7">
        <h2>Inside the Kitchen</h2>
        <p>Smells Like Bakin' started out in the garage of the husband wife due Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
        <p><a href="#" class="btn-small>Read More</a>" </p>
    </div>

    <div class="grid5_ omega"
        <h2>Get Bakin' with Us</h2> 

        <div id="contact">
            <p>Call us: <span>1-555-CUP-CAKE</span><br>
            Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
        </div>

        <p>We announce all of our new flavors first through Facebook &amp; Twitter, even take requests!</p>
        <a href="http:www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
        <a href="http:www.twitter.com/#!/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>
    </div>

    <div id="copyright" class="grid_12">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved. </p>
    </div>

</div>

</body> </html>

June 5, 2013 4:35pm

it cut some of the code off...but the pictures in there, are they right?

June 5, 2013 4:36pm

With what you have right now you should put your pictures in a file named 'img'.

June 5, 2013 4:40pm

Just another thing you forgot to close your "grid5_ omega", this is what it looks like <div class="grid5_ omega" this is what it should look like <div class="grid5_ omega">. Also you have to take <p><a href="#" class="btn-small>Read More</a>" </p> and put the second double qoute right after the btn-small like this <p><a href="#" class="btn-small">Read More</a></p>.

June 5, 2013 4:45pm

i made a new file called img and put the pictures in it. i am still really confused and the pictures still won't show up.

June 5, 2013 4:47pm

Are the names of the images what you call them in you markup?

June 5, 2013 6:17pm

The only image that didn't show up was the jalapeno cupcake. To make that show up, you can change to a regular 'n' character. <img src="img/new-cupcake-jalapeño.jpg" alt="Jalapeno"> <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno">

June 5, 2013 6:20pm

from:

<img src="img/new-cupcake-jalapeño.jpg" alt="Jalapeno">

to:

<img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno">

June 4, 2013 8:23pm

Moved this thread to the HTML topic. Just a reminder that questions posed in General Discussion can not be marked with a best answer.

June 5, 2013 4:34pm

With what you have right now you should put your pictures in a file named 'img'.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Jessica Babka

Jessica Babka

Adding an Image in HTML

7 Answers

Lydia Tsai

Lydia Tsai

Jessica Babka

Jessica Babka

Jessica Babka

Jessica Babka

Kham Sanvoravong

Kham Sanvoravong

Chase Lee

Chase Lee

Kham Sanvoravong

Kham Sanvoravong

Elliott Frazier

Elliott Frazier

Jessica Babka

Jessica Babka

Kham Sanvoravong

Kham Sanvoravong

Jessica Babka

Jessica Babka

Kham Sanvoravong

Kham Sanvoravong

Jessica Babka

Jessica Babka

Jessica Babka

Jessica Babka

Chase Lee

Chase Lee

Chase Lee

Chase Lee

Jessica Babka

Jessica Babka

Chase Lee

Chase Lee

Kham Sanvoravong

Kham Sanvoravong

Kham Sanvoravong

Kham Sanvoravong

Daniel Lewis

Daniel Lewis

Chase Lee

Chase Lee