2.16 圖片

<img src="#">：src 為圖片的路徑。img 是 image 的縮寫。沒有結尾標籤。

語意

圖片。

常用屬性

<img src="#" alt="圖片未正常出現會出現的文字" title="滑鼠移過，稍微停留會出現的文字">

範例 1

正常圖片顯示，以及滑鼠移過後，出現 title 的文字。

<img src="https://alldata.sgp1.digitaloceanspaces.com/images/butterfly.png" alt="圖片未正常出現會出現的文字" title="滑鼠移過，稍微停留會出現的文字">

結果呈現

路徑

絕對路徑：

<img src="https://alldata.sgp1.digitaloceanspaces.com/images/butterfly.png">

相對路徑：

<img src="../images/butterfly.png">

<img src="./images/butterfly.png">

.：代表當前資料夾。

..：代表上一層資料夾。

範例 2

圖片末正常出現時，顯示 alt 的文字。

<img src="http://notes.carlos-studio.com/images/no_pic.png" alt="圖片未正常出現會出現的文字" title="滑鼠移過，稍微停留會出現的文字">

結果呈現：

小工具：暫時性的假圖

暫時性的假圖網址：https://via.placeholder.com/300x200