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 Steven Morgan
Steven Morgan
294 Points

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
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

Steven Morgan
Steven Morgan
294 Points

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

thuselem
thuselem
7,716 Points
thuselem
thuselem
7,716 Points

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">
Steven Morgan
Steven Morgan
294 Points

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