Làm cách nào để tham chiếu đúng tài nguyên cục bộ trong HTML?

Question

Khi nó quay ra, tham chiếu nguồn tài nguyên địa phương có thể là một điểm chà cho một số. Tôi đang tìm một câu trả lời chuẩn cho tham chiếu tài nguyên cục bộ và ý nghĩa của chúng.

Lấy những ví dụ này, sự khác nhau giữa các đường dẫn tham chiếu này là gì?

• <img src="myfile.png" /> (không có dấu gạch chéo hàng đầu)
• <img src="/myfile.png" /> (với dấu gạch chéo hàng đầu)
• <img src="folder/myfile.png" /> (không có dấu gạch chéo hàng đầu/trong thư mục con)
• <img src="/folder/myfile.png" /> (với dấu gạch chéo hàng đầu/trong thư mục phụ)
• <img src="../folder/myfile.png" /> (có dấu chấm và dấu gạch chéo hàng đầu/trong thư mục con)

Answer 1

• Dấu gạch chéo hàng đầu yêu cầu trình duyệt bắt đầu tại thư mục gốc.
• Nếu bạn không có dấu gạch chéo hàng đầu, bạn đang tham chiếu từ thư mục hiện tại.
• Nếu bạn thêm hai dấu chấm trước dấu gạch chéo hàng đầu, điều đó có nghĩa là bạn đang tham chiếu đến tên gốc của thư mục hiện tại.

Lấy cấu trúc thư mục sau

thông báo:

• dấu chọn ROOT là màu xanh lá cây,
• dấu chọn thứ hai là cam,
• dấu chọn thứ ba là màu tím,
• dấu chọn ra có màu vàng

Bây giờ trong file index.html.en bạn sẽ muốn đặt đánh dấu sau

<p> 
    <span>src="check_mark.png"</span> 
    <img src="check_mark.png" /> 
    <span>I'm purple because I'm referenced from this current directory</span> 
</p> 

<p> 
    <span>src="/check_mark.png"</span> 
    <img src="/check_mark.png" /> 
    <span>I'm green because I'm referenced from the ROOT directory</span> 
</p> 

<p> 
    <span>src="subfolder/check_mark.png"</span> 
    <img src="subfolder/check_mark.png" /> 
    <span>I'm yellow because I'm referenced from the child of this current directory</span> 
</p> 

<p> 
    <span>src="/subfolder/check_mark.png"</span> 
    <img src="/subfolder/check_mark.png" /> 
    <span>I'm orange because I'm referenced from the child of the ROOT directory</span> 
</p> 

<p> 
    <span>src="../subfolder/check_mark.png"</span> 
    <img src="../subfolder/check_mark.png" /> 
    <span>I'm purple because I'm referenced from the parent of this current directory</span> 
</p> 

<p> 
    <span>src="subfolder/subfolder/check_mark.png"</span> 
    <img src="subfolder/subfolder/check_mark.png" /> 
    <span>I'm [broken] because there is no subfolder two children down from this current directory</span> 
</p> 

<p> 
    <span>src="/subfolder/subfolder/check_mark.png"</span> 
    <img src="/subfolder/subfolder/check_mark.png" /> 
    <span>I'm purple because I'm referenced two children down from the ROOT directory</span> 
</p> 

Bây giờ nếu bạn tải lên các tập tin index.html.en nằm trong thư mục con thứ hai
http://example.com/subfolder/subfolder/

Đây sẽ là đầu ra của bạn