การตรวจสอบไฟล์รูปภาพ กรณีรูปภาพไม่ปรากฏบน webpage [Article ID : 159]

คุณอาจจะเคยมีปัญหาเกี่ยวกับการ Insert รูปภาพ (Images) มาใช้งานบนหน้าเว็บเพจของคุณ แล้วรูปภาพไม่ปรากฎแสดงผลกันบ้าง ซึ่งที่ Web Browser จะแสดงเป็นช่องว่าง ๆ แล้วมีเครื่องหมายสัญลักษณ์ว่าไม่สามารถแสดงรูปภาพได้ อยู่ด้านบนซ้ายมือปรากฏแทน ครั้งนี้ผมจะแนะนำการตรวจสอบปัญหาในกรณีนี้ดังกล่าวให้ครับ ดังนี้

สาเหตุที่รูปภาพไม่ปรากฏจะมีอยู่ 2 สาเหตุใหญ่ ๆ ด้วยกัน ดังนี้
1. รูปภาพนั้นไม่มีอยู่จริงบน Server/Web Hosting
2. URL ไฟล์รูปภาพ ไม่มีลักษณะเรียกเป็นรูปแบบ URL

ทั้ง 2 ข้อข้างต้นคือสาเหตุหลัก ๆ ที่ผมมักพบเจอบ่อย ๆ จากผู้ที่เข้ามาสอบถาม และเข้าไปช่วยแก้ปัญหา ซึ่งทั้ง 2 สาเหตุ มีวิธีการตรวจสอบและแก้ไข ดังนี้

ทั้ง 2 สาเหตุข้างต้น เราสามารถใช้ Web Browser ที่ใช้ทำการตรวจสอบได้ครับ โดยให้ทำการเปิด Web Page ที่มีปัญหานั้นกับ Web Browser (ในบทความนี้ผมใช้ Chrome เป็นตัวอย่าง) จากนั้นจึงทำการตรวจสอบ ดังนี้

วิธีตรวจสอบ

การตรวจสอบรูปภาพไม่แสดงผลกับเว็บเพจของเราด้วย Web Browser นั้น เราสามารถตรวจสอบได้ง่าย ๆ ครับ ดังนี้

1. ที่ Web Browser ให้เรานำเมาท์ไปที่ตำแหน่งของรูปภาพที่ไม่ปรากฏ จากนั้นให้ทำการ Click ขวาที่ตำแหน่งนั้น จากนั้นเลือกไปที่เมนู ตรวจสอบ ดังรูป 2. เมื่อเลือกแล้วจะปรากฎ Developer Tools ขึ้นมาด้านล่างของ Browser ดังรูป 3. ให้เราสังเกตุที่ Tag ที่ Browser ได้ทำการไฮไลท์เลือกไว้ให้ จะพบตำแหน่งและชื่อของไฟล์รูปภาพที่ใช้ ให้ทำการคลิกขวาไปที่ชื่อรูปภาพ จากนั้นเลือกที่ Open link new in tab ดังรูป 4. เมื่อปฏิบัติตามข้อ 3 แล้ว หากไฟล์รูปภาพนั้นไม่มีอยู่จริงบน Server หรือ Web Hosting ที่หน้าจอ Web Browser จะแสดงผล ดังรูป *จากรูปแสดงว่าที่ Web Hosting ของเราไม่มีไฟล์รูปภาพนั้นอยู่ Web Browser จึงไม่สามารถแสดงผลได้

วิธีการแก้ไข

เมื่อเราทราบสาเหตุแล้วให้ทำการแก้ไข ดังนี้

1. Upload ไฟล์รูปภาพขึ้นบน Server หรือ Web Hosting โดยอัพโหลดให้ถูกต้องตรงตาม Folder ที่ไฟล์รูปภาพเรียกใช้งาน
2. หากอัพโหลดขึ้น Web Hosting แล้ว รูปก็ยังไม่แสดงผล ให้ท่านอ่านและทำความเข้าใจ 2 บทความ นี้
- การตั้งชื่อไฟล์ที่ใช้กับเว็บไซต์
- Insert รูปภาพกับ Dreamweaver แล้วรูปไม่แสดงที่ Browser