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

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

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.

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

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.

thanks i managed to do it using brackets