รูปภาพ Markdown
รูปภาพทำให้เนื้อหาของคุณน่าสนใจมากขึ้นและช่วยอธิบายประเด็นของคุณ Markdown ให้ไวยากรณ์ง่ายๆ สำหรับการเพิ่มรูปภาพ แม้ว่าบางครั้งคุณจะต้องใช้ HTML สำหรับฟีเจอร์ขั้นสูงมากกว่า
ไวยากรณ์รูปภาพพื้นฐาน
ไวยากรณ์พื้นฐานสำหรับรูปภาพใน Markdown คล้ายกับลิงก์ แต่มีเครื่องหมายอัศเจรีย์ที่จุดเริ่มต้น:
รูปภาพพร้อมชื่อเรื่อง
คุณสามารถเพิ่มชื่อเรื่องที่จะปรากฏเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ:
แนวทางปฏิบัติที่ดีสำหรับ Alt Text
Alt text มีความสำคัญอย่างยิ่งสำหรับการเข้าถึงและ SEO:
1. เขียนให้อธิบายได้
❌ ไม่เป็นประโยชน์:
✅ อธิบายได้:
2. ทำให้กระชับ
❌ ยาวเกินไป:
✅ กระชับ:
3. อย่าใส่ "รูปภาพของ" หรือ "ภาพของ"
❌ ซ้ำซาก:
✅ ตรงไปตรงมา:
รูปภาพแบบอ้างอิง
เช่นเดียวกับลิงก์ คุณสามารถใช้ไวยากรณ์แบบอ้างอิงสำหรับรูปภาพ:
![ข้อความทางเลือก][image-reference]
[image-reference]: image.jpg "ชื่อเรื่องเสริม"
ตัวอย่าง
นี่คือโลโก้ของเรา: ![โลโก้บริษัท][logo]
และนี่คือภาพหน้าจอ: ![ภาพหน้าจอแอป][screenshot]
[logo]: /images/logo.png "โลโก้บริษัทของฉัน"
[screenshot]: /images/app.png "ภาพหน้าจอแดชบอร์ดแอป"
เส้นทางและ URL ของรูปภาพ
รูปภาพในเครื่อง
รูปภาพภายนอก
รูปแบบที่ใช้กันทั่วไป
รูปภาพพร้อมคำบรรยาย
*รูปที่ 1: การประชุมทีมประจำสัปดาห์เพื่อหารือเกี่ยวกับเป้าหมายโครงการ*
รูปภาพก่อน/หลัง
## ก่อน
## หลัง
คำแนะนำทีละขั้นตอน
1. คลิกไอคอนการตั้งค่า
2. เลือก "การตั้งค่าบัญชี"
3. อัปเดตข้อมูลโปรไฟล์ของคุณ
แกลเลอรีรูปภาพ
## ภาพหน้าจอโครงการ
  
การแก้ไขปัญหารูปภาพ
ปัญหาที่พบบ่อย
- รูปภาพไม่แสดง: ตรวจสอบเส้นทางไฟล์และชื่อไฟล์
- ไอคอนรูปภาพเสียหาย: ตรวจสอบว่า URL รูปภาพเข้าถึงได้
- รูปภาพใหญ่เกินไป: ปรับขนาดหรือบีบอัดรูปภาพ
- รูปแบบผิด: ตรวจสอบให้แน่ใจว่าเบราว์เซอร์รองรับรูปแบบรูปภาพ
การทดสอบรูปภาพ
- •ดูตัวอย่างในโปรแกรมแก้ไข Markdown ของคุณ
- •ตรวจสอบในเบราว์เซอร์ต่างๆ
- •ทดสอบบนอุปกรณ์มือถือ
- •ทดสอบกับการเชื่อมต่ออินเทอร์เน็ตช้า
เทคนิคขั้นสูง
ลิงก์รูปภาพ
รวมรูปภาพกับลิงก์:
[](full-size.jpg)
รูปภาพเป็นวิธีที่มีพลังในการปรับปรุงเอกสาร Markdown ของคุณ ใช้อย่างรอบคอบเพื่อสนับสนุนเนื้อหาและปรับปรุงประสบการณ์ผู้ใช้!
ต้องการเน้นข้อความในเนื้อหาของคุณ? เรียนรู้เกี่ยวกับ การจัดรูปแบบ strikethrough ต่อไป