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 jake hazelwood
jake hazelwood
3,848 Points

Image wont display img src section in text editors and html > images and lists

7:45 in the video is what I am talking about i'm trying to follow this and when i try it myself nothing shows in my browser (google chrome) i have downloaded the images that are associated with that video and tried saving them in a folder and then trying to link to that image but with no success I have spent hours trying to change the folder path and checking my code, iv tried looking on google for a similar problem but im useless. can anyone help me I'm sure all I need to know is how to link the image correctly but following the tutorial doesn't show you how to save the images so i dont exactly know how to link to them.

Can anyone help me?? my email is jakehazelwood1994@hotmail.co.uk if you would like to email me

6 Answers

Luke Buśk
Luke Buśk
21,598 Points
Luke Buśk
Luke Buśk
21,598 Points

Best way would be to have the "img" folder in the same place as Your index.html file. Put a picture in the img folder. Lets say its called picture.png so the code would be:

<img src="img/picture.png" alt="blablabla">

99% of problems with images are because of the bad path or missing a symbol.

jake hazelwood
jake hazelwood
3,848 Points
jake hazelwood
jake hazelwood
3,848 Points

here is the code that i have written 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin' Cupcake Company</title>
</head>
<body>
<img src="C:/Users/Jake/Desktop/images/DayZ_Map.jpg" alt="image
</body>
</html>

also im on windows so should I be using reverse backslashes instead of //////

[[ed. note:]] Added markdown to fix code formatting

Luke Buśk
Luke Buśk
21,598 Points
Luke Buśk
Luke Buśk
21,598 Points

I cant see Your code, if You wanna type a code in here make a tab or 4 spaces before the code.

I dont think backslash matters, it works for me with both normal and reverse.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

jake - You forgot to close the quote on your alt text and close your img tag.

jake hazelwood
jake hazelwood
3,848 Points
jake hazelwood
jake hazelwood
3,848 Points

Thanks everyone for your input I also noticed a few others on these forums that have had the same problems with this like me I managed to sort this out in the end the reason was because I would save the file by pressing control s and it was saving it to my download folder which was different to my index file I thought I was saving to so therefore when I would try to update the webpage to see my image I hadn't actually changed anything. I think teamtreehouse should explain how and where to save the images that you download to go along with the tutorial.

Again thanks everyone for your help no doubt I will jumping back into these forums for your support.

Blaine McGaffigan
Blaine McGaffigan
2,501 Points
Blaine McGaffigan
Blaine McGaffigan
2,501 Points

I'm still having problems getting the image to appear in my browser. Why don't you explain better how you got it to work. How and where did you save the images from the download? Here's my code. I don't understand paths.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> </head> <body> <img src="img/logo.gif" alt="Smells Like Bakin"> </body> </html>