จะเพิ่มระดับในเส้นทาง src ของ URL ใน HTML ได้อย่างไร

101

ฉันกำลังจัดเก็บสไตล์ชีตใน {root} / styles ในขณะที่รูปภาพอยู่ใน {root} / images สำหรับเว็บไซต์ ฉันจะกำหนดเส้นทางในสไตล์ชีตเพื่อไปดูในไดเร็กทอรีรูปภาพสำหรับรูปภาพที่ระบุได้อย่างไร

เช่นใน background-image: url('/images/bg.png');

html css relative-path

— น้ำอัดลม
แหล่งที่มา

184

ใช้..เพื่อระบุไดเร็กทอรีหลัก:

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

— วันนี้
แหล่งที่มา

ฉันอ่านที่อื่นเช่นกัน - แต่มันไม่ได้ผล! (อย่างน้อยก็ใน Chrome)

— aateeque

27

มัน. อย่างไรก็ตามโปรดทราบว่าตำแหน่งนั้นสัมพันธ์กับตำแหน่งของไฟล์ CSS ไม่ใช่เอกสารที่ฝังไฟล์ CSS

— ThiefMaster

1

@ThiefMaster ควรเป็นถ้าเราใช้เฉพาะ CSS แบบอินไลน์

— 1000Gbps

58

นี่คือสิ่งที่คุณต้องรู้เกี่ยวกับเส้นทางไฟล์สัมพัทธ์:

เริ่มต้นด้วยการ /ส่งคืนไปยังไดเร็กทอรีรากและเริ่มต้นที่นั่น
เริ่มต้นด้วยการ ../ย้ายหนึ่งไดเรกทอรีไปข้างหลังและเริ่มต้นที่นั่น
เริ่มต้นด้วยการ ../../ย้ายสองไดเรกทอรีไปข้างหลังและเริ่มที่นั่น (และอื่น ๆ ... )
ในการก้าวไปข้างหน้าเพียงแค่เริ่มด้วยไดเรกทอรีย่อยแรกและก้าวต่อไป

คลิกที่นี่เพื่อดูรายละเอียดเพิ่มเติม!

— ส. อัครวัลลา
แหล่งที่มา

52

ใช้../:

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

คุณสามารถใช้บ่อยเท่าที่คุณต้องการเช่น../../images/หรือแม้กระทั่งในตำแหน่งต่างๆเช่น../images/../images/../images/( เช่นเดียวกับ../images/หลักสูตร)

— ThiefMaster
แหล่งที่มา

9

ใน Chrome เมื่อคุณโหลดเว็บไซต์จากเซิร์ฟเวอร์ HTTP บางเส้นทางทั้งเส้นทางสัมบูรณ์ (เช่น/images/sth.png) และเส้นทางสัมพัทธ์ไปยังไดเรกทอรีระดับบน (เช่น../images/sth.png) ทำงาน

แต่!

เมื่อคุณโหลด (ใน Chrome!) เอกสาร HTML จากระบบไฟล์ภายในคุณจะไม่สามารถเข้าถึงไดเร็กทอรีที่อยู่เหนือไดเร็กทอรีปัจจุบัน กล่าวคือคุณไม่สามารถเข้าถึง../something/something.sthและเปลี่ยนเส้นทางสัมพัทธ์เป็นสัมบูรณ์หรือสิ่งอื่นใดจะไม่ช่วย

— จาโบจา
แหล่งที่มา

1

เมื่อตรวจสอบอีกครั้งฉันสามารถรายงานได้ว่าพา ธ สัมพัทธ์ของระบบไฟล์โลคัลโดยใช้../ทำงานได้ดี - หรืออย่างน้อยก็ทำงานได้ดีในกรณีนี้!

— aateeque

1

มันทำงานบน linux และ windows ไม่ใช่บน mac (ประสบการณ์ของฉัน)

— gabn88

ไม่นับลิงก์ที่นี่เนื่องจากไม่มีการตรวจสอบต้นทางเดียวกัน นอกจากนี้คำตอบนี้มีอายุ 6 ปีดังนั้นเบราว์เซอร์อาจมีการเปลี่ยนแปลงไปมาก

— jaboja

1

ฉันแค่ยืนยันสำหรับคนอื่นที่ดูคำตอบ

— Ajay

0

สมมติว่าคุณมีโครงสร้างไฟล์ต่อไปนี้:

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

ใน CSS คุณสามารถเข้าถึงตัวอย่างเช่นใช้สายimage1../images/image1.png

หมายเหตุ : หากคุณใช้ Chrome อาจใช้งานไม่ได้และคุณจะได้รับข้อผิดพลาดว่าไม่พบไฟล์ ฉันมีปัญหาเดียวกันดังนั้นฉันเพิ่งลบประวัติแคชทั้งหมดจาก chromeและใช้งานได้

— ก. เทสโตส
แหล่งที่มา

0

หากคุณเก็บสไตล์ชีต / รูปภาพไว้ในโฟลเดอร์เพื่อให้เว็บไซต์หลายแห่งใช้งานได้หรือคุณต้องการใช้ไฟล์เดิมซ้ำในไซต์อื่นบนเซิร์ฟเวอร์เดียวกันฉันพบว่าเบราว์เซอร์ / Apache ของฉันไม่อนุญาตให้ฉันไปที่ โฟลเดอร์หลักที่อยู่เหนือ URL รากของเว็บไซต์ สิ่งนี้ดูเหมือนชัดเจนสำหรับเหตุผลด้านความปลอดภัย - ไม่ควรเรียกดูรอบ ๆ บนเซิร์ฟเวอร์ที่อื่นนอกเหนือจากโฟลเดอร์เว็บที่ระบุ

เช่น. ไม่ทำงาน: www.mywebsite.com/../images

เป็นวิธีแก้ปัญหาชั่วคราวฉันใช้ Symlinks:

ไปที่ไดเร็กทอรีของ www.mywebsite.com รันคำสั่ง ln -s ../images images

ตอนนี้ www.mywebsite.com/images จะชี้ไปที่ www.mywebsite.com/../images

— ลีนเดอร์ท
แหล่งที่มา