Question

The junior web developer in your team is having issues displaying images from the project directory. As the senior web developer, you have identified that the path names been used are wrong. Using examples of each, explain to the junior web developer how absolute and relative file paths can affect the image display.

Answer 1

Absolute File Paths

An absolute file path is the full URL to a file:

Example ->

1. <img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" >
2. <img src="C:\Users\DELL\Pictures\Screenshots/capture.png" >

Both the examples are example of absolute file path.

In the first one, the file is located on the web.

and in the second one, the file is located on the user's computer.

Relative File Path

A relative file path points to a file relative to the current page.

Example ->

1. <img src="/images/mountain.jpg" >
2. <img src="images/mountain.jpg" >
3. <img src="../images/mountain.jpg" >
4. <img src="mountain.jpg" >

1. The file path points to a file in the images folder located at the root of the current web.

2. The file path points to a file in the images folder located in the current folder.

3.  The file path points to a file in the images folder located in the folder one level up from the current folder.

4. The file path points to a file located in a current working directory.

Hope you understand the difference between Absolute File Path and Relative File Path.

If you need more help then please comment below, so that I can help you more.

Thank You...