การเรียกใช้พาธ (Path) ในการทำเว็บหลักๆ จะแบ่งออกเป็น 2 ประเภทใหญ่ๆ (และแบ่งย่อยตามลักษณะการเขียน) ดังนี้:
1. /request/pic.png เรียกว่าอะไร?
แบบนี้เรียกว่า Absolute Relative Path หรือ Root-Relative Path
- คำอธิบาย: การขึ้นต้นด้วยเครื่องหมายสแลช
/ตัวแรก หมายถึง “ให้วิ่งกลับไปเริ่มนับจากจุดสูงสุด (Root) ของโดเมนเสมอ” (ในที่นี้คือ[https://vir9.com/](https://vir9.com/)) แล้วค่อยวิ่งเข้าโฟลเดอร์requestต่อ - ข้อดี: ไม่ว่าพี่จะเปิดไฟล์ vir9
.htmlจากโฟลเดอร์ไหนในเว็บ (เช่น อยู่ในโฟลเดอร์ชั้นลึกๆ) พาธนี้จะชี้ไปที่รูปเดิมได้อย่างถูกต้องเสมอ ไม่มีวันหลงทางครับ
2. pic.png (ไม่มีสแลชข้างหน้า) เรียกว่าอะไร?
แบบนี้เรียกว่า Document-Relative Path หรือ Relative Path แท้ๆ (อิงตามตำแหน่งปัจจุบัน)
- คำอธิบาย: การเขียนชื่อไฟล์หรือชื่อโฟลเดอร์ขึ้นมาลอยๆ โดยไม่มี
/ข้างหน้า หมายถึง “ให้มองหาไฟล์นี้ในโฟลเดอร์เดียวกันกับไฟล์ HTML ที่กำลังเปิดอยู่ ณ ตอนนี้” - ตัวอย่าง: ถ้าไฟล์
vir9.htmlของพี่ อยู่ในโฟลเดอร์requestอยู่แล้ว การเขียนแค่vir9.pngมันจะดึงรูปมาแสดงได้ทันที แต่ถ้าวันไหนพี่ ย้ายไฟล์vir9.htmlออกไปไว้ข้างนอก รูปจะบอด (Broken) ทันที เพราะมันจะหาในโฟลเดอร์ปัจจุบันไม่เจอครับ
🗺️ สรุปประเภทของ Path ในการพัฒนาเว็บ (มีทั้งหมด 3 แบบหลัก)
เพื่อให้เห็นภาพรวม เวลาพี่เขียนโค้ดสำหรับโปรเจกต์ต่อๆ ไป จะได้เลือกใช้ได้อย่างแม่นยำครับ:
| รูปแบบการเขียน | ประเภทของ Path | ความหมายและการทำงาน |
[https://vir9.com/request/vir.png](https://vir9.com/request/vir.png) | Absolute Path (พาธแบบเต็ม) | ระบุที่อยู่แบบเต็มรูปแบบ มีโปรโตคอล (https://) และชื่อโดเมนชัดเจน ดึงภาพจากเว็บไหนมาใส่ก็ได้ แต่จะติดปัญหาเรื่องความปลอดภัย (CORS) ง่ายถ้าดึงข้ามเว็บ |
/request/vir9.png | Root-Relative Path (อิงจากโฟลเดอร์ราก) | อิงจากจุดสูงสุดของโดเมนเราเอง โดยเริ่มจากเครื่องหมาย / เสมอ ย้ายไฟล์ HTML ไปไว้โฟลเดอร์ไหน รูปก็ไม่พัง (แนะนำที่สุดสำหรับงานภายในเว็บเดียวกัน) |
vir9.pngหรือ images/pic.png | Document-Relative Path (อิงจากไฟล์ปัจจุบัน) | อิงจากตำแหน่งที่ไฟล์ HTML นั้นๆ เซฟอยู่ ณ ปัจจุบัน ถ้าไฟล์ HTML ย้ายที่ พาธนี้ต้องเขียนแก้ตาม |
💡 แถมเทคนิคการถอยโฟลเดอร์:
หากใช้แบบ Document-Relative แล้วต้องการให้สคริปต์ “ถอยหลังออกจากโฟลเดอร์ปัจจุบันไป 1 ชั้น” ในการทำเว็บเราจะใช้สัญลักษณ์จุดสองจุด
../เช่น../images/pic.pngแปลว่า ให้ถอยออกจากโฟลเดอร์นี้ไป 1 ชั้นก่อน แล้วค่อยวิ่งเข้าไปที่โฟลเดอร์ images