Skip to content

Latest commit

 

History

History
68 lines (37 loc) · 1.42 KB

2.11-tu-pian.md

File metadata and controls

68 lines (37 loc) · 1.42 KB

2.17 圖片

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

語意

圖片。

常用屬性

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

範例 1

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

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

結果呈現

{% embed url="https://codepen.io/carlos411/pen/PoYpYvr" %}

路徑

絕對路徑:

<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