ปัญหาหลักที่เกี่ยวข้องกับการเพิ่มรูปภาพ HTML จากแหล่งข้อมูลระยะไกลคืออาจทำให้เวลาในการโหลดหน้าเว็บช้าลง เนื่องจากเบราว์เซอร์ต้องส่งคำขอแยกต่างหากสำหรับแต่ละภาพ ซึ่งสามารถรวมกันได้อย่างรวดเร็วหากมีหลายภาพในหน้านั้น นอกจากนี้ หากรีโมตซอร์สล่มหรือมีการเชื่อมต่อที่ช้า อาจทำให้เวลาในการโหลดเพจล่าช้าไปอีก ประการสุดท้าย ยังมีความเสี่ยงเพิ่มขึ้นจากช่องโหว่ด้านความปลอดภัย เนื่องจากอิมเมจถูกดึงมาจากแหล่งภายนอก
<img src="https://example.com/image.jpg" alt="Example Image">
1. โค้ดบรรทัดนี้เป็นแท็กรูปภาพ HTML ซึ่งใช้เพื่อแสดงรูปภาพบนหน้าเว็บ
2. แอตทริบิวต์ “src” ระบุ URL ของภาพที่จะแสดง ในกรณีนี้คือ “https://example.com/image.jpg”
3. แอตทริบิวต์ “alt” ให้ข้อความทางเลือกสำหรับรูปภาพ ในกรณีนี้คือ “รูปภาพตัวอย่าง”
คุณลักษณะ img src
แอตทริบิวต์ img src ใน HTML ใช้เพื่อระบุแหล่งที่มาของรูปภาพ ใช้ภายใน แท็กเพื่อกำหนดแหล่งที่มาของรูปภาพ ค่าของแอตทริบิวต์นี้ควรเป็น URL ที่ถูกต้องซึ่งชี้ไปยังไฟล์รูปภาพ แอตทริบิวต์นี้จำเป็นสำหรับรูปภาพทั้งหมดบนหน้าเว็บ และช่วยให้เบราว์เซอร์สามารถค้นหาและแสดงรูปภาพได้
ฉันจะเพิ่มรูปภาพภายนอกใน HTML ได้อย่างไร
การเพิ่มรูปภาพภายนอกใน HTML นั้นค่อนข้างง่าย สิ่งที่คุณต้องทำคือใช้ แท็กและระบุแหล่งที่มาของรูปภาพโดยใช้แอตทริบิวต์ src ไวยากรณ์สำหรับการเพิ่มรูปภาพภายนอกใน HTML มีลักษณะดังนี้:
โดยที่ “image_url” คือลิงก์ไปยังไฟล์รูปภาพ และ “ข้อความแสดงแทน” คือคำอธิบายของสิ่งที่อยู่ในรูปภาพ (เพื่อวัตถุประสงค์ในการเข้าถึง)
ตัวอย่างเช่น หากคุณต้องการเพิ่มรูปภาพภายนอกจากเว็บไซต์ของคุณที่ชื่อว่า my-image.jpg โค้ดของคุณจะมีลักษณะดังนี้:
