Đường dẫn tương đối vs. tuyệt đối

Tiếng Anh:
– Relative path: đường dẫn tương đối
– Absolute path: đường dẫn tuyệt đối

File system

Hệ thống file system trong máy tính được tổ chức thành các file và directory. Khi sử dụng Terminal, để biết bạn đang ở directory nào:

$ pwd

pwd là viết tắt của print working directory. Ở Windows thì gõ dir trong cửa sổ cmd.

Để di chuyển tới một thư mục khác, ta dùng lệnh cd (change directory)

$ cd <path>

Path ở đây có thể là relative path hoặc absolute path. Absolute path là đường dẫn bắt đầu từ root (/), còn relative path là đường dẫn kể từ directory hiện tại đang ở (dùng pwd để kiểm tra)

Các ví dụ

Relative path

Ví dụ 1: Giả sử bạn đang ở thư mục /home/thinh:

$ cd code/react-example

Do đây là relative path, câu lệnh trên sẽ đưa bạn tới directory code/react-example tính từ directory hiện tại ⚠️ /home/thinh/code/react-example

Câu lệnh trên tương đương với

$ cd ./code/react-example

. là đại diện cho current directory (directory hiện tại)

Ví dụ 2: Giả sử bạn đang ở /home/thinh/code/react-example:

$ cd ../angular-example

Câu lệnh này sẽ đưa bạn tới /home/thinh/code/angular-example.. đại diện cho parent directory (đường dẫn cha), hiểu nôm na là đi ngược lại 1 bước.

Ví dụ 3: Giả sử bạn đang ở bất cứ folder nào và user hiện tại là thinh:

$ cd ~/code

Câu lệnh trên sẽ đưa bạn tới /home/thinh/code vì:
~ đại diện cho đường dẫn Home của user hiện tại
– Trong Linux, đường dẫn Home của một user nằm trong /home/<tên-user>

HTML

Relative path và absolute path cũng được áp dụng tương tự trong HTML. Giả sử bạn đang ở đường link: http://abc.com/users/123, trong trang có một thẻ img với attribute src="uploads/dog.jpg" thì trình duyệt sẽ hiểu là bạn đang muốn đi tới uploads/dog.jpg tính từ path hiện tại ⚠️, do vậy nó sẽ tương đương với src="https://abc.com/users/123/uploads/dog.jpg".

Nếu bạn sửa một chút thành src="/uploads/dog.jpg" (thêm / vào trước upload), thì trình duyệt sẽ hiểu là bạn đang muốn load file uploads/dog.jpg tính từ root (root ở đây là host http://abc.com).

Ngoài ra, bạn có thể đọc thêm về thẻ base trong HTML https://stackoverflow.com/a/24028648/1974153