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" 的文件夾中，"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> 標簽