Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ problem with path of image

Posted by: ahnam Apr 16 2021, 05:31 AM

Backoud info:

The HTML is in folder C:\Users\anine\Documents\CSS Learn
The images are in folder C:\Users\anine\Documents\CSS Learn\image

The path on the images in the HTML is

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h2 class="subtitle">About this image 1</h2>
<img src="..\image\logo.png">
<br>
<h2>About this image 2</h2>
<img src="..\image\img_white_flower.jpg">
</body>
</html>

If I put the imges in the HTML path then the images are displayed.

When I put them in the image folder then they are not displayed.
I put the whole path in - images not displayed
I change the \ the / - images not displayed
I made sure that the name of the images are corrects - images not displayed

Can somebody be so kind as to show me what I am doing wrong because I am not stuck?

Posted by: pandy Apr 16 2021, 06:34 AM

1. Use URLs not Windows paths.

2. You've got the relative URL wrong. ../ means one folder up. Correct relative URL would be

CODE

image/logo.png

See further here https://htmlhelp.com/faq/html/basics.html#relative-url .

Full path may not work, depending on what browser you use, but full URL should.

CODE

file:///C:/Users/anine/Documents/CSS%20Learn/image/logo.png

Also, spaces in file and directory names aren't a good idea, because spaces aren't allowed in URLs and must be URL encoded, e.g. replaced with %20 as in my example above. You can use hyphen or underscore as word separators if you still want several distinguishable words in the name. Uppercase can also be tricky, since most servers are case sensitive, unlike windows. It's easy to make a mistake with that if you don't stick to a strict naming scheme. I'd use all lower case. Even if you are just playing on your computer now, I assume you at some point will want to place your stuff on a server, so it's as well to have that in mind from start. Good habits, you know.

Posted by: ahnam Apr 16 2021, 06:44 AM

Thanks you very much pandy!!!!!

Posted by: pandy Apr 16 2021, 07:10 AM

You are welcome.