When starting from the root directory, we refer to the path as absolute. In contrast, when starting from the current directory, we refer to it as relative.

Completely different perspective:

<img src="puppy.png"/>

here lies a relative reference.

Absolute without question:

<img src="http://www.bar.com/pictures/puppy.png"/>

this is a full URL, often considered an absolute path, yet it does not fully represent the concept.

The distinction between relative and absolute paths lies in the way references are made. When using relative paths, the current working directory serves as the starting point, while absolute paths point to predetermined directories. Relative paths are practical when a program needs to access resources from specific folders within the working directory.

Sample relative paths:

• photo.png, which is similar to .\photo.png (on Windows) or ./photo.png (on other platforms).  The . indicates that the path is relative to the current working directory, although this is implicit if the path does not start at the root directory. In certain cases, you may need to specify a directory explicitly.

• ..\pictures\photo2.jpg  This method allows you to access resources in directories above the current one. The ..\ signifies moving up a folder level, reaching the directory containing both the current and pictures folders. Use \ in Windows and / elsewhere.

Sample absolute paths:

• C:\files\document.txt
• F:\movies\great_film.mp4

and more.

Paths Explained

When it comes to specifying paths in web development, there are two main types: relative paths and absolute paths.

Relative paths are used to reference files within the current server. This method allows you to build and test your website offline before taking it live.

For instance, a relative path could look like php/webct/itr/index.php.

On the other hand, absolute paths point directly to a file on the web using its complete URL. This tells the browser exactly where to find the file.

For example, an absolute path might be

http://www.uvsc.edu/disted/php/webct/itr/index.php

.

Although absolute paths are simpler to use and comprehend, it is generally not recommended for your own website. Relative paths offer the advantage of offline construction and testing before uploading. If you rely on absolute paths, you may encounter issues when moving your site or changing domain names, as the URLs would need to be updated in the code.

Source:

Picture having a window open on

http://www.example.com/sample/page.html

Within all of them (HTML, Javascript and CSS):

opened_url = http://www.example.com/sample/page.html
base_path = http://www.example.com/sample/
home_path = http://www.example.com/
/kitten.png = Home_path/kitten.png
kitten.png = Base_path/kitten.png

In HTML and Javascript, the base_path is dependent on the opened window. In larger javascript projects, a BASEPATH or root variable is needed to store the base_path occasionally. (such as this)

In CSS, the opened url corresponds to the address where your .css file is located or loaded, which is not the same as javascript with the currently opened window in this scenario.

For increased security in absolute paths, it is advisable to use // instead of http:// for potential future transitions to https://. In your example, utilize it in this manner:

<img src="//www.example.com/images/kitten.png">

An simple illustration to grasp the concept:

// Examples of absolute links:
import TextInput from "src/views/atoms/text-input";
import Button from "src/views/atoms/buttons";

// Examples of relative links:
import TextInput from "../../atoms/text-input";
import Button from "../../atoms/buttons";

Choosing a Path:

• Consider taking a relative approach by downloading a self-contained directory, such as a zipped file, to access locally without connecting to the server. This can greatly improve performance, especially on slow networks.

Opting for an Absolute Path:

• If security is a concern, you may choose to use absolute paths despite sacrificing network speed. This method allows you to restrict access to certain files for specific users and potentially enhance network traffic management.

This instance serves as a means to simplify your comprehension.

Windows Path Variances

Windows absolute path C:\Windows\calc.exe

Windows non absolute path (relative path) calc.exe

In the illustration above, the absolute path includes the complete file path, whereas the non-absolute path only shows the file name. If you were in a directory without "calc.exe," an error would occur with the non-absolute path. On the contrary, using an absolute path allows you to access "calc.exe" from any directory.

Linux Path Variances

Linux absolute path /home/users/c/computerhope/public_html/cgi-bin

Linux non-absolute path (relative path) /public_html/cgi-bin

In these examples, the absolute path discloses the complete path to the cgi-bin directory on the system. How to ascertain the absolute path of a file in Linux Typically, users prefer a relative prompt rather than the full path. To acquire the full absolute path of the current directory, utilize the pwd command.

It is advisable to employ relative file paths (whenever feasible).

By utilizing relative file paths, your web pages will not be restricted by your current base URL. Consequently, all hyperlinks will function seamlessly on your computer, local server, and any future public domains you may have.