HTML <img> แอตทริบิวต์ src

HTML <img> แบบ

การใช้งานและการประกาศ

สำคัญ src แอตทริบิวต์ระบุ URL ของภาพ

มีสองวิธีที่สามารถระบุ src ระบุ URL ในแอตทริบิวต์

1. URL ที่เป็นเชิงแน่น - ลิงก์ไปยังภาพที่เก็บอยู่ในเว็บไซต์อื่น ตัวอย่างเช่น:

src="https://www.codew3c.com/images/img_girl.jpg"

แจ้งเตือน：ภาพนอกเว็บไซต์อาจมีลิขสิทธิ์ ถ้าคุณไม่ได้รับอนุญาตใช้งาน อาจจะละเมิดกฎหมายลิขสิทธิ์ นอกจากนี้ คุณไม่สามารถควบคุมภาพนอกเว็บไซต์นี้ได้; มันอาจจะถูกลบหรือเปลี่ยนไปอย่างทันที

2. URL ที่เป็นเชิงสัมพันธ์ - ลิงก์ไปยังภาพที่เก็บอยู่ในเว็บไซต์ของเรา

ในนี้ URL ไม่รวมโดเมน ถ้า URL ของคุณไม่เริ่มต้นด้วยเส้นขนานตั้ง มันจะเป็นเชิงสัมพันธ์ต่อหน้าเว็บปัจจุบัน ตัวอย่างเช่น:

src="img_girl.jpg"

ถ้า URL ของคุณเริ่มต้นด้วยเส้นขนานตั้ง มันจะเป็นเชิงสัมพันธ์ต่อโดเมน ตัวอย่างเช่น:

src="/images/img_girl.jpg"

คำเตือน:อาจจะดีที่จะใช้ URL ที่เป็นเชิงสัมพันธ์ ถ้าคุณเปลี่ยนชื่อโดเมน จะไม่มีการแตกลิงก์

แจ้งเตือน：ถ้าเบราจู้ไม่สามารถหาภาพได้ จะแสดงสัญลักษณ์ลิงก์ที่เสียหายและข้อความ alt

คำเตือน:เพื่อจัดเก็บเอกสาร ผู้สร้างมักจะเก็บไฟล์รูปภาพไว้ในโฟลเดอร์แยกออกมา และมักจะตั้งชื่อโฟลเดอร์เหล่านั้นว่า "pics" หรือ "images" หรือชื่ออื่นที่คล้ายนี้ ในคู่มือออนไลน์ของ CodeW3C.com วิศวกรของเราได้จัดเก็บภาพที่ใช้บ่อยที่สุดไว้ในโฟลเดอร์ชื่อ "i" ซึ่งเป็นการย่อของ "images" และมีประโยชน์ที่สุดคือสามารถลดทางเดินไปยังภาพได้เรียบร้อยที่สุด

ตัวอย่าง

ในตัวอย่างด้านล่างนี้ เราได้ใส่ภาพที่ถ่ายโดยวิศวกรที่ CodeW3C.com ที่ถ่ายที่ฮอลลี่ฝายหวานในฝายหวานฮางหวานของเมืองหลวงฝายหวาน ภาพไฟล์ที่ชื่อว่า "eg_tulip.jpg" ถูกจัดเก็บไว้ในโฟลเดอร์ "i" บนเซิร์ฟเวอร์นี้ นี่คือรหัสที่ใช้ในการเขียนแบบภาพของเรา:

<img src="/i/eg_tulip.jpg" />

ผลลัพธ์ของโค้ดดังกล่าวคือ:


ทดลองด้วยตัวเอง

คำเตือน:คุณสามารถทดลองด้วยเครื่องมือตรวจสอบของเราออนไลน์ทดลองด้วยตัวเองหากคุณเปลี่ยนชื่อไฟล์ในตัวอย่างเป็น "eg_chinarose.jpg" คุณจะเห็นภาพชาดดอกประดับ อย่างเช่นนี้:

โค้ดต้นฉบับ:

<img src="/i/eg_chinarose.jpg" />

ผลลัพธ์ของโค้ดดังกล่าวคือ:

การใช้งาน

<img src="URL">

ค่าของแบบที่เรียก

ค่า คำอธิบาย
URL

กำหนด URL ของภาพ。

ค่าที่เป็นไปได้:

  • URL แบบเสริม - หน้าเว็บที่อยู่นอก (เช่น src="http://www.example.com/image.gif")
  • URL แบบสัมพันธ์ - หน้าเว็บภายในเว็บไซต์ (เช่น src="image.gif")

การสนับสนุนเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน

HTML <img> แบบ