HTML <img> 標籤
更多“自己嘗試”的例子見下文。
定義和用法
<img> 標籤用於在 HTML 頁面中嵌入影像。
影像實際上並非插入到網頁中；影像是連結到網頁的。<img> 標籤為引用的影像建立了一個佔位符。
<img> 標籤有兩個必需的屬性
- src - 指定影像的路徑
- alt - 如果影像因某種原因無法顯示，則為影像指定替代文字
注意： 還要始終指定影像的寬度和高度。如果未指定寬度和高度，則頁面在影像載入時可能會閃爍。
提示： 要將影像連結到另一個文件，只需將 <img> 標籤巢狀在 <a> 標籤內（請參見下面的示例）。
瀏覽器支援
| 元素 | |||||
|---|---|---|---|---|---|
| <img> | 是 | 是 | 是 | 是 | 是 |
屬性
| Attribute | 值 | 描述 |
|---|---|---|
| alt | text | 為影像指定替代文字 |
| crossorigin | anonymous use-credentials |
允許來自允許跨域訪問的第三方站點的影像與 canvas 一起使用 |
| height | 畫素 | 指定影像的高度 |
| ismap | ismap | 將影像指定為伺服器端影像對映 |
| loading | eager lazy |
指定瀏覽器是立即載入影像還是推遲載入影像，直到滿足某些條件 |
| longdesc | URL | 指定影像詳細描述的 URL |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
指定獲取影像時要使用的引用者資訊 |
| sizes | sizes | 為不同的頁面佈局指定影像尺寸 |
| src | URL | 指定影像的路徑 |
| srcset | URL-list | 指定在不同情況下使用的影像檔案列表 |
| usemap | #mapname | 將影像指定為客戶端影像對映 |
| width | 畫素 | 指定影像的寬度 |
全域性屬性
<img> 標籤也支援 HTML 中的全域性屬性。
事件屬性
<img> 標籤也支援 HTML 中的事件屬性。
更多示例
示例
對齊影像（使用 CSS）
<img src="smiley.gif" alt="笑臉" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="笑臉" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="笑臉" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="笑臉" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="笑臉" width="42" height="42" style="float:left">
自己動手試一試 »
示例
新增影像邊框（使用 CSS）
<img src="smiley.gif" alt="笑臉" width="42" height="42" style="border:5px solid black">
自己動手試一試 »
示例
為影像新增左右邊距（使用 CSS）
<img src="smiley.gif" alt="笑臉" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
自己動手試一試 »
示例
為影像新增上下邊距（使用 CSS）
<img src="smiley.gif" alt="笑臉" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
自己動手試一試 »
示例
如何從另一個資料夾或另一個網站插入影像
<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://w3schools.tw/images/lamp.jpg" alt="Lamp" width="32" height="32">
自己動手試一試 »
示例
如何為影像新增超連結
<a href="https://w3schools.tw">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>
自己動手試一試 »
示例
如何建立影像對映，帶有可點選的區域。每個區域都是一個超連結
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
自己動手試一試 »
相關頁面
HTML 教程：HTML 影像
HTML DOM 參考：Image 物件
CSS 教程：樣式化影像
預設 CSS 設定
大多數瀏覽器將使用以下預設值顯示 <img> 元素
