A file path specifies the location of a file inside a web folder structure. File paths are like an address of file for a web browser.
File paths are used on webpages to link external files like: Web pages, Images, Videos, Style sheets, JavaScript, CSS etc. To insert a file in a web page its source must be known.
File Path Examples
- <img src=”myPicture.jpg”> It specifies that myPicture.jpg is located in the same folder as the current page.
- <img src=”images/myPicture.jpg”> It specifies that myPicture.jpg is located in the images folder in the current folder.
- <img src=”/images/myPicture.jpg”> It specifies that myPicture.jpg is located in the images folder at the root of the current web.
- <img src=”../myPicture.jpg”> It specifies that myPicture.jpg is located in the folder one level up from the current folder.
Types of File Paths
- Absolute File Paths
- Relative File Paths
Absolute File Paths
Absolute file path specifies full URL address.
Example
<img src="https://eywiah.com/wp-content/uploads/2021/12/image-65.png">Relative File Paths
The relative file path specifies to a file which is related to the location of current page.
Examples
In following example file path points to a file in the images folder located at the root of the current web.
<img src="/images/nature-2.jpg">
In below example file path points to a file in the images folder located in the current folder.
<img src="images/nature-3.jpg"> - “
/"means the root of the current drive. - “
./” means the current directory. "../"means the parent of the current directory.- “../../” = Two directories back.
In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder.
<img src="../images/picture.jpg" alt="Mountain">
You should use relative file paths, so that your code will be independent of URL.