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 How to Make a Website Creating HTML Content Add Image Gallery Content

Kharym Rasool
Kharym Rasool
1,453 Points

When I preview page loads as Index of/ (bullet point) img/ (this is linked to my actual website & no links work)

My preview page shows

Index of/ (bullet point) img/ (this is linked to my actual website & no links work)

This all happened as I carefully changed the images in the workspace to my own preferences than the ones recommended to download.

My code is as follows;

<!DOCTYPE hmtl>

<hmtl> <head> <meta charset="utf-8"> <title>Kharym Rasool | not an entrepreneur</title> </head> <body> <header> <a href="index.html"> <h1>Kharym Rasool</h1> <h2>not an entreprenur</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/ElectricCars.jpg"> <img src="img/ElectricCars.jpg" alt=""> <p>Electric cars charging at a charging station</p> </a> </li> <li> <a href="SustainableLiving.jpg"> <img src="img/SustainableLiving.jpg" alt=""> <p>Interior of a sustainabily built home</p> </a> </li> <li> <a href="img/WalkCar.jpg"> <img src="img/WalkCar.jpg" alt=""> <p>Electric cars charging at a charging station</p> </a> </li> <li> <li> <a href="img/WholeFoods.jpg"> <img src="img/WholeFoods.jpg" alt=""> <p>Electric cars charging at a charging station</p> </a> </li> <li> <li> <a href="img/WholeFoods.jpg"> <img src="img/WholeFoods.jpg" alt=""> <p>Electric cars charging at a charging station</p> </a> </li> </ul> </section> <footer> <p>Ā© 2015 Kharym Rasool. </p> </footer> </body> </hmtl>

Edward Woolls
Edward Woolls
166 Points

Hi Kharym,

If I am understanding you correctly, you would like to load the pictures from your personal site instead of those provided. If this is the case and your "workspace" is not hosted on the same domain, then you would need to change your img sources to something like this

img src="http://www.yoursite.com/img/picture.png" alt="">

You can also leave a # in the hyperlink reference syntax, unless otherwise advised by the teacher. This will bring up the picture almost the same way as when you "view" a picture on google rather than visiting the site. Placing the # is not advisable as it would bring the browser to the top of the page but its better than pulling attention away from your content.

Hope this helps?

:)

Kharym Rasool
Kharym Rasool
1,453 Points

Thanks for the response Ed, taken both yours & Sara's advice, really appreciate the help, cheers again

1 Answer

Sara Greer
Sara Greer
16,032 Points

If I'm understanding you correctly, you are trying to link to images hosted on your website instead of the images provided by Treehouse? I'm not completely familiar with how workspaces works, but you can try writing out the full URL instead of the relative one you're using above.

So instead of

<a href="img/ElectricCars.jpg">

try

<a href="http://www.yourwebsite.com/img/ElectricCars.jpg">

Hope that helps!

Kharym Rasool
Kharym Rasool
1,453 Points

Yeah your right, I have however downloaded the images & dropped them into workspaces, I'd have thought it'd have allowed for any images as the instructor suggested, also did it so that the code sinks in a little more & I manage to pick it up quicker. thanks for the suggestion though I'll have a look,

cheers