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 vellon rasmos manzvanda
vellon rasmos manzvanda
8,012 Points

html image linking

i am using notepad++ for my practice. when i link my images on the same folder as my html but in keep getting a broken image. what could be wrong. this is my link <img src="img/gombe1.jpeg"/>

3 Answers

Mike Wagner
Mike Wagner
23,559 Points

Unless your HTML is actually one folder higher than the folder "img" then you would be looking in the wrong place.

  • index.html <-- This html is looking for...
  • img <-- this folder...
    • gombe1.jpeg <-- to have this image inside it...

given the code you have provided. If the html is actually inside the img folder, then remove the img/ from the link and you should be fine. Otherwise, if you'd prefer to have an img folder, just move the html so it sits beside the img folder in your directory tree, rather than being nested inside the img folder.

vellon rasmos manzvanda
vellon rasmos manzvanda
8,012 Points

i have moved it outside the img folder but its still doing the same

Mike Wagner
Mike Wagner
23,559 Points
Mike Wagner
Mike Wagner
23,559 Points

I'm not sure what your file structure looks like, but usually it's something similar to this Sample File Structure

for simple projects. If you are also set up similarly and your "index.html" (using the name from the example image) is making a call to the "img" folder to retrieve the file named in your code, then it should work. The only issues I would see, might be a typo somewhere in your spelling.

This is where a decent text editor like Brackets, Atom, or even VS Code really shine for web development (and programming, given the right extensions). Unless you have heavily-modded Notepad++ you really don't get the benefits of syntax highlighting, autocompletion, or code-hinting that make learning this stuff easier and let you focus on coding instead of spell-checking.

It's possible that you have other issues though, so perhaps you can share the relevant code. Go back through your project and make sure you have your folder for images actually named img, that the spelling of the image's filename is spelled right and the right font-case, and make sure that it is actually a jpeg instead of jpg or some other extension. We'll get it figured out, it just might take a couple tries. Perhaps try it in a different browser as well, just to see if it works or doesn't.

vellon rasmos manzvanda
vellon rasmos manzvanda
8,012 Points
vellon rasmos manzvanda
vellon rasmos manzvanda
8,012 Points

thanks i managed to do it using brackets