Mission 4: Image

เป้าหมายของ Mission นี้: ใส่รูปภาพด้วย <img> และเข้าใจว่าทำไมต้องมี alt เสมอ

Image Tag

<img> ใช้แสดงรูปภาพ ต้องมี src (ที่อยู่ไฟล์รูป) และ alt (ข้อความสำรองเวลา โหลดรูปไม่ได้ หรือให้ screen reader อ่าน) เสมอ — ใน JSX จริง <img> ต้อง self-close ด้วย /> เพราะเป็น tag ที่ไม่มีลูก (ในเวิร์กสเปซนี้ใช้ HTML ธรรมดา ไม่ บังคับ self-close แบบ JSX)

ทำไมต้องมี alt เสมอ

alt ไม่ใช่แค่ backup text — เป็นเรื่อง accessibility ที่สำคัญ ผู้ใช้ screen reader ใช้มันเข้าใจว่ารูปนั้นคืออะไร

Demo

<img src="src/avatar.jpg" alt="รูปโปรไฟล์ของจิรายุ" />