HTML <img>用法及代碼示例

HTML <img>標記用於在網頁/網站內添加圖像。如今，網站不直接將圖像添加到網頁，因為使用<img>標簽將圖像鏈接到網頁，該標簽為圖像保留了空間。

用法:

<img src="" alt="" width="" height="">

屬性：<img>標記具有以下屬性。

HTML <img> src屬性用法及代碼示例：它用於指定圖像的路徑。
alt:它用於為圖像指定替代文本。這很有用，因為它可以通知用戶有關圖像的含義，並且由於任何網絡問題，如果無法顯示圖像，則將顯示此替代文本。
crossorigin:它用於從允許cross-origin訪問與畫布一起使用的第三方站點導入圖像。
height:用於指定圖像的高度。
width:用於指定圖像的寬度。
ismap:它用於將圖像指定為服務器端圖像映射。
loading:它用於指定瀏覽器是應推遲加載圖像直到滿足某些條件還是立即加載圖像。
longdesc:它用於指定指向圖像詳細描述的URL。
referrerpolicy：用於指定在提取圖像時要使用的引薦來源信息，即no-referrer，no-referrer-when降級，來源，origin-when-cross來源，unsafe-url。
sizes:用於指定不同頁麵布局的圖像尺寸。
srcset:它用於指定在不同情況下使用的圖像文件列表。
usemap:它用於將圖像指定為客戶端圖像映射。

範例1：在此示例中，我們將<img>標記與src，width，height和alt屬性一起使用。

HTML


<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <h3>GeeksforGeeks logo</h3>
      
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
        width="420" height="100" 
        alt="Geeksforgeeks.org">
</body>
  
</html>

輸出：

具有寬度和高度的img src

範例2：在此示例中，我們添加了style屬性，以向圖像添加邊框。

HTML


<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <h3>GeeksforGeeks logo</h3>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
        width="420" height="100" 
        alt="Geeksforgeeks.org" 
        style="border:5px solid black">
</body>
  
</html>

輸出：

帶有邊框的圖像源

相關用法

注：本文由純淨天空篩選整理自Mandeep_Sheoran大神的英文原創作品 HTML <img> Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。