HTML <img> 標簽

定義和用法

<img> 標簽用于在 HTML 頁面中嵌入圖像。

從技術上講，實際上并沒有將圖像插入到網頁中，而是將圖像鏈接到了網頁。<img> 標簽創建了一個容器，用于引用圖像。

<img> 標簽有兩個必需的屬性：

  • src - 規定圖像的路徑
  • alt - 如果由于某種原因無法顯示圖像，則指定圖像的替代文本

注意：另外，始終要指定圖像的寬度和高度。如果未指定寬度和高度，則在加載圖像時頁面可能會閃爍。

提示：如需將圖像鏈接到另一個文檔，只需將 <img> 標記嵌套在 <a> 標簽內（請參閱下面的例子）。

另請參閱：

HTML 教程：HTML 圖像

HTML DOM 參考手冊：Image 對象

CSS 教程：設置圖像的樣式

延伸閱讀：如何正確地使用圖像

實例

例子 1

在下面的例子中，我們在頁面中插入一幅 CodeW3C.com 的工程師在上海鮮花港拍攝的郁金香照片：

<img src="tulip.jpg" alt="上海鮮花港 - 郁金香" />

親自試一試

上海鮮花港 - 郁金香

例子 2

另一個如何插入圖像的實例：

<img src="dancer.png" alt="舞者" width="500" height="749">

親自試一試

提示：頁面底部提供更多實例。

屬性

屬性 值 描述
alt 文本 規定圖像的替代文本。
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 尺寸 規定不同頁面布局的圖像尺寸。
src URL 規定圖像的路徑。
srcset URL-list 規定在不同情況下使用的圖像文件列表。
usemap #mapname 將圖像定義為客戶器端圖像映射。
width 像素 規定圖像的寬度。

全局屬性

<img> 標簽還支持 HTML 中的全局屬性。

事件屬性

<img> 標簽還支持 HTML 中的事件屬性。

更多實例

例子 3

對齊圖像（使用 CSS）：

<img src="flower.gif" alt="Flower" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="Flower" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="Flower" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="Flower" width="90" height="90" style="float:right">
<img src="flower.gif" alt="Flower" width="90" height="90" style="float:left">

親自試一試

例子 4

添加圖像邊框（使用 CSS）：

<img src="flower.gif" alt="Flower" style="border:5px solid black">

親自試一試

例子 5

為圖像添加左右外邊距（使用 CSS）：

<img src="flower.gif" alt="Flower" style="vertical-align:middle;margin:0px 50px">

親自試一試

例子 6

為圖像添加上下外邊距（使用 CSS）：

<img src="flower.gif" alt="Flower" style="vertical-align:middle;margin:50px 0px">

親自試一試

例子 7

如何從另一個文件夾或另一個網站插入圖像：

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

親自試一試

例子 8

如何給圖片添加超鏈接：

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

親自試一試

例子 9

如何創建帶有可點擊區域的圖像映射。每個區域都是一個超鏈接：

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

親自試一試

延伸閱讀 - 如何正確地使用圖像

HTML 和 XHTML 最引人注目的特征之一，就是能夠在文檔的文本中包括圖像，既可以把圖像作為文檔的內在對象（內聯圖像），也可以將其作為一個可通過超鏈接下載的單獨文檔，或者作為文檔的背景。

合理地在文檔內容中加入圖像（靜態的或者具有動畫效果的圖標、照片、說明、繪畫，等等）時，會使文檔變得更加生動活潑，更加引人入勝，而且看上去更加專業，更具信息性并易于瀏覽。還可以專門使一個圖像成為超鏈接的可視引導圖。

然而，如果過度使用圖像，文檔就會變得支離破碎，混亂不堪，而且無法閱讀，用戶在下載和查看該頁面時，更會增加很多不必要的等待時間。

請閱讀下面的文章，學習 Web 上的兩種主要圖像格式：GIF 和 JPEG，以及如何正確地使用圖像：

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <img> 元素：

img {
  display: inline-block;
}

親自試一試

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持