Html relative paths using period

Question

I'm confused as to when the following are used and what they mean, for example in the src attribute of an img tag.

I know / means 'current directory' and ../ means 'up one directory'

.   Current Directory?  &lta href="." />  
./  Current Directory   &ltimg src="./image.png" />  
/   Root directory      &ltimg src="/image.png" />  
../ Up one directory    &ltimg src="../image.png" />

What is the difference between ./image.png and /image.png

Updated : / means root directory of the site

Answer 1

/ means starting from the root directory. Whereas ./ is the current directory, though I'm not sure there's any need for it (unless you're planning on appending to a PATH in Linux systems... happy to be wrong about that one).

Answer 2

./image.png will grab image.png relative to your current location. Calling ./image.png on domain.tld/site/page.html will look for the image at domain.tld/site/image.png

/image.png will look for the image in the root of your site. domain.tld/image.png

---

You could also use things like ../images/image.png . If this was used on domain.tld/site/page.html , the browser would load the image from domain.tld/images/image.png

Answer 3

The / means the root directory. Use . For the current directory.