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

Michelle Harrison
Michelle Harrison
8,782 Points
Posted by Michelle Harrison
Michelle Harrison
8,782 Points

Issue with image code

I'm currently doing the Front-End Development track and am working on HTML. I've been doing a separate practice website on Notepad++ for additional practice.

I'm having issues with the images on one of the pages not showing up.

This is the code on the main page (index.html): <!DOCTYPE html> <html> <head> <title>Cupcake World></title> </head> <body> <h1>Cupcake World</h1> <br /> <ul> <li><a href="Chocolate/chocolate.html">Chocolate</a></li> <img src="images/Chocolate_cupcakes.jpg" alt="Chocolate"/> <li>Vanilla</li> <img src="images/vanilla-cupcakes-1.jpg" alt="Vanilla"/> <li>Other</li> <img src="images/Rainbow_cupcakes.jpg" <alt="Other" <title="Other"/> <li><a href="ContactInfo/contact.html">Contact Info</a></li> <li>Catering</li> <li>Shopping Cart</li> </ul> </body> <footer></footer> </html>

This is the code on one of the subpages (chocolate.html): <!DOCTYPE html> <html> <head> <title>Cupcake World-Chocolate Cupcakes</title> </head> <body> <h1>Chocolate</h1> <ul> <li>Chocolate Heart Cupcake</li> <img src="images/Chocolate-heart-cupcakes-1.jpg" alt="Chocolate Heart Cupcake"/> <li>Peanut Butter & Chocolate Cupcake</li> <img src="images/chocopage/Peanut-Butter-and-Chocolate-Cupcakes_2.jpg" alt="Peanut Butter & Chocolate cupcake"/> <li>Hidden Fudge Chocolate Cupcake</li> <img src="images/vanilla-cupcakes-1.jpg" alt="Vanilla"/> <li>Hidden Cherry Cupcake</li> <img src="images/chocopage/cherry-inside-4.jpg" alt="Hidden Cherry Cupcake"/> <li>Peppermint Chocolate Cupcake</li> <img src="images/chocopage/peppermint-chocolate-5.jpg" alt="Peppermint Chocolate Cupcake"/> </body> <footer></footer> </html>

The images on the chocolate page aren't showing up. I even copy and pasted the code from the vanilla cupcake image on the index page to the chocolate page and it's still not working. Here are a the screenshot of the pages and how they appear in Chrome. Main Page http://i1341.photobucket.com/albums/o757/emmy8113/Main%20Page_zpsx2fcm64w.jpg

Chocolate page http://i1341.photobucket.com/albums/o757/emmy8113/Chocolate%20Page_zps9yw3zk5h.jpg

Here are the image of the folders: Main Folder: http://i1341.photobucket.com/albums/o757/emmy8113/Main%20Folder_zpsvubprpic.jpg

Images Folder: http://i1341.photobucket.com/albums/o757/emmy8113/Images%20Folder_zpspodgko1a.jpg

Chocolate Page Images Folder: http://i1341.photobucket.com/albums/o757/emmy8113/ChocoPage%20Images_zpsarxagzpt.jpg

I don't understand what I'm missing. Please help and Thank you in advance :D

2 Answers

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

Hi Michelle

I think this may be because your chocolate.html page is within the subfolder chocolate so the site may be expecting to find the images at /chocolate/images/Chocolate-heart-cupcakes-1.jpg for example.

Try prefixing one of the image links with ../ (as below) as if I rememeber correctly this should tell it to find the images folder at the level above not within the chocolate folder. If it helps you could change the rest or possibly re-jig your folder structure.

<li>Chocolate Heart Cupcake</li>
        <img src="../images/Chocolate-heart-cupcakes-1.jpg"
            alt="Chocolate Heart Cupcake"/>

Hope it helps!

Stephen

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

No problem, glad it helped!

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I noticed syntax errors with these lines

<img src="images/Rainbow_cupcakes.jpg"
    <alt="Other"
    <title="Other"/>

alt and title are attributes of an element, so this should be written as

<img src="images/Rainbow_cupcakes.jpg" alt="Other" title="Other"/>
Michelle Harrison
Michelle Harrison
8,782 Points
Michelle Harrison
Michelle Harrison
8,782 Points

Thank you for pointing that out.