Làm cách nào để tăng cấp trong đường dẫn src của URL trong HTML?

Tôi đang lưu trữ các biểu định kiểu trong {root} / styles trong khi hình ảnh trong {root} / images cho một trang web. Làm cách nào để cung cấp đường dẫn trong các biểu định kiểu để tìm trong thư mục hình ảnh cho các hình ảnh được chỉ định?

ví dụ: trong background-image: url('/images/bg.png');

Sử dụng ..để chỉ thư mục mẹ:

background-image: url('../images/bg.png');

Đây là tất cả những gì bạn cần biết về đường dẫn tệp tương đối:

• Bắt đầu với việc / quay trở lại thư mục gốc và bắt đầu ở đó

• Bắt đầu với việc ../ di chuyển lùi một thư mục và bắt đầu ở đó

• Bắt đầu với việc ../../ di chuyển lùi hai thư mục và bắt đầu ở đó (và cứ thế ...)

• Để tiếp tục , chỉ cần bắt đầu với thư mục con đầu tiên và tiếp tục tiến về phía trước.

Bấm vào đây để biết thêm chi tiết!

Sử dụng ../:

background-image: url('../images/bg.png');

Bạn có thể sử dụng nó thường xuyên nếu bạn muốn, ví dụ: ../../images/hoặc thậm chí ở các vị trí khác nhau, ví dụ ../images/../images/../images/(giống như ../images/tất nhiên)

Trong Chrome khi bạn tải một trang web từ một số máy chủ HTTP, cả đường dẫn tuyệt đối (ví dụ /images/sth.png) và đường dẫn tương đối đến một số thư mục cấp cao hơn (ví dụ ../images/sth.png) đều hoạt động.

Nhưng!

Khi bạn tải (trong Chrome!) Một tài liệu HTML từ hệ thống tệp cục bộ, bạn không thể truy cập các thư mục phía trên thư mục hiện tại. Tức là bạn không thể truy cập ../something/something.sthvà thay đổi đường dẫn tương đối thành tuyệt đối hoặc bất cứ điều gì khác sẽ không giúp được gì.

Giả sử bạn có cấu trúc tệp sau:

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

Trong CSS, bạn có thể truy cập image1, ví dụ, bằng cách sử dụng dòng ../images/image1.png.

LƯU Ý : Nếu bạn đang sử dụng Chrome, nó có thể không hoạt động và bạn sẽ gặp lỗi không thể tìm thấy tệp. Tôi đã gặp vấn đề tương tự, vì vậy tôi chỉ xóa toàn bộ lịch sử bộ nhớ cache khỏi chrome và nó đã hoạt động.

Nếu bạn lưu trữ các biểu định kiểu / hình ảnh trong một thư mục để nhiều trang web có thể sử dụng chúng hoặc bạn muốn sử dụng lại cùng một tệp trên một trang web khác trên cùng một máy chủ, tôi nhận thấy rằng trình duyệt / Apache của mình không cho phép tôi truy cập bất kỳ thư mục mẹ nào phía trên URL gốc của trang web. Điều này có vẻ hiển nhiên vì lý do bảo mật - người ta sẽ không thể duyệt trên máy chủ ở bất kỳ nơi nào ngoài các thư mục web được chỉ định.

Ví dụ. không hoạt động: www.mywebsite.com/../images

Để giải quyết vấn đề, tôi sử dụng Symlinks:

Đi tới thư mục của www.mywebsite.com Chạy lệnh ln -s ../images images

Bây giờ www.mywebsite.com/images sẽ trỏ đến www.mywebsite.com/../images