Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

What have I done wrong with my images?

I am working through the web design track, and am having issues with adding images to my portfolio site we are building. Nick's site has his images, but mine only shows an x in the browser and in dreamweaver.. Any ideas?

I can see the photos in my computer before I added them to the workspace..

2 Answers

August Fagelberg
August Fagelberg
2,080 Points

You have to supply a image path dependent on the file you're editing. Let's say your directory structure looks like this:

|-- images
    |-- my-image.jpg
|-- portfolio
    |-- my-portfolio.html
| index.html

When you're in your root index.html file, you will have to type:

<img src="images/my-image.jpg" alt="A picture of an image">

But when you're in my-portfolio.html in the sub-folder portfolio, you will have to type...

<img src="../images/my-image.jpg" alt="A picture of an image">

... to achieve the same result. This basically tells HTML to go one folder back and then go look in the folder images for the image my-image.jpg

Thank you! It was as simple as my folder being IMG, an the code reading img.

Do you have the src attribute pointing to the right location? When I have this problem, I have usually forgotten to include the folder name.

I think the folder in the portfolio project is "img", so it would look something like this:

<img src="img/my_image.jpg" alt="My image">

Thank you! It was as simple as my folder being IMG, an the code reading img.