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 Godfrey M
Godfrey M
Courses Plus Student 2,696 Points

my images not displaying

i have passed all tests on images, but when i try to use images on my computer to add them on the page i am creating they don't display only the "alt" attribute is displayed. i don't know whether the problem is with my laptop?? or the problem is with my image formats?? can someone explain in detail what is causing this display failure??

Jeanie Herold
Jeanie Herold
15,555 Points

can you show us your code for that area of the website? that will help us give you an answer specific to your issue.

It is more than likely your file path to the images. Common mistake but it might not be.

Once I see your code I will help more.

5 Answers

Jeanie Herold
Jeanie Herold
15,555 Points

Hey Mutabazi I pulled your code and put it in sublime and tested it. It works perfect as you have it. This is what I copied --> (note the 'Markdown Cheatsheet just below the text-area you are writing in when commenting in here - it has shortcuts for how to display code (3 tic marks before and after your code will display it as follows:

<!DOCTYPE.html> 
<html lang="eng"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>mega website</title> 
    </head> 

    <body> 
        <h2>load this image</h2> 
        <img src="img/nick.jpg" alt="nick's image" width="200px"> 
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS55pvY4fAUHYN95vZe5s87d2w5VnXeNvUgVnvXA6Kv8Yh9eQJnQ" width="100%";/>

    </body> 
</html>

(I put a width on the nick.jpg image simply because my test image was too big - nothing wrong with your code there)

make sure your index.html and img folder are in the root folder together - then the nick.jpg should be in the img folder. It sounds as if that is what you did though. Since the BMW photograph you have as a link also isnt displaying on your computer I doubt your folder structure is not correct so... Check your browser settings for image display. This is the how to check in chrome - if you use a different browser then google for how to check your settings in that browser chrome image settings

As for saving as jpg/jpeg or png files - You simply save as that file type using a photo editor like Adobe Photoshop. I use Adobe but there are many free photo image editors. DO a google search for how to reduce images for web ready on google or youtube. youtube has 1000's of videos that are short and easy. Also do a google search for the best free editors if you go that route.

If I think of something else I will let you know.

Let us know if you get it working.

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

I guess you have broken link (alt really display when the link is broken :)). On workspaces the images path are relative to HTML - if you want to use those images (outside workspaces / treehouse download files) you need to copy-paste the absolute path URL (full web address),

Debug to see any errors: https://teamtreehouse.com/library/how-to-make-a-website/debugging-html-and-css-problems/use-developer-tools

Learn this topic:

If this is not the problem add workspace/code/code example

You also can use lorem images if you want (google it): http://pipsum.com/

Godfrey M
PLUS
Godfrey M
Courses Plus Student 2,696 Points
Godfrey M
Godfrey M
Courses Plus Student 2,696 Points

thanks guys for helpful answers , the problem i'm still new here i don't know how to attach/upload my workspace or my code on this forum. but this is what i did , i opened a new folder in my local disk "D" and named it HTML, then inside it i created another folder i called it "img" and i saved some images in the "img" folder. so on my text editor , i am using sublime text; this is what i did; <!DOCTYPE.html> <html lang="eng"> <head> <meta charset="UTF-8"> <title>mega website</title> </head> <body> <h2>load this image</h2> <img src="img/nick.jpg" alt="nick's image"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS55pvY4fAUHYN95vZe5s87d2w5VnXeNvUgVnvXA6Kv8Yh9eQJnQ" width="100%";/>

</body> </html>

from the above, BOTH THE RELATIVE AND ABSOLUTE URL's ARE NOT DISPLAYING.

is there a problem with my laptop? may be it needs some extensions plugged in? may be my file types are large?, may be my file path instruction is wrong .

one more question . i don't know how you get "jpeg" images or "png" images. and how can you reduce a large image to be small and easily load on a website.

Godfrey M
PLUS
Godfrey M
Courses Plus Student 2,696 Points
Godfrey M
Godfrey M
Courses Plus Student 2,696 Points

thanks , but i'm sorry this code isn't working for me now only the absolute works. may be there is a technical problem with my laptop.

Godfrey M
PLUS
Godfrey M
Courses Plus Student 2,696 Points
Godfrey M
Godfrey M
Courses Plus Student 2,696 Points

wow!! wow!! finally got it!!! this is to all people beginning to code like me, i have spent 3 days thinking why my computer is not displaying my images ??. i had to go through different websites researching on file path but it could not solve my problem. but atlast after scratching my head several times it was simple, just the extension of a "jpg or png " let me down. so fellow junior developers don't fall in same trouble like me . my code now is <img src="img/jaguar.png" width="100px" > and it worked

i can't forget to say that jeane herold is very helpful , she did guide me alot and i give her the best answer thanks alot!!!