{%hackmd @dzif24x25/yRBnguqQQl-2ylH1j5h0cg %} # HTML `<img>` 圖片 --- # `<img>` 介紹 --- ### 'img' 是 'image' 的 縮寫 有「鏡像；影像；映射」的意思  --- ### 顧名思義，`<img>`可以把你想要的照片放到網頁上 --- ## `<img>` 用法 ```htmlembedded! <img src="圖片來源" width="圖片的寬" height="圖片的高" alt="代替文字"> ``` --- ```htmlembedded! <img src="圖片來源" width="圖片的寬" height="圖片的高" alt="代替文字"> ``` #### `src` 照片來源 ###### 可以是圖片的網址，也可以用圖片的路徑 ###### (這是最重要的屬性，沒有這個屬性就沒有照片) --- ```htmlembedded! <img src="圖片來源" width="圖片的寬" height="圖片的高" alt="代替文字"> ``` #### `width` 圖片的寬 ###### 以像素為單位，必須是無單位的整數 --- ```htmlembedded! <img src="圖片來源" width="圖片的寬" height="圖片的高" alt="代替文字"> ``` #### `alt` 代替文字 ###### 當圖片無法正常顯示時，使用代替文字代替照片 --- ### 範例 ```htmlembedded= <img src="https://i.imgur.com/syAXAme.png" width=100 height=100 alt="大直高中資訊社"> ``` --- ### 範例結果 <img src="https://i.imgur.com/syAXAme.png" width=100 height=100 alt="大直高中資訊社"> --- # 補充 ## 絕對路徑 & 相對路徑 --- ## 絕對路徑 以根目錄為基準的目錄路徑 --- ### 範例 ``` file:///C:/Users/Anthony/Desktop/abc.png ``` ``` https://i.imgur.com/syAXAme.png ``` --- ## 相對路徑 以自身所在位置為參考基礎，而建立的目錄路徑 --- 三種相對路徑的特殊符號： * `.` 代表目前所在的目錄 * `..` 代表上一層目錄 * `/` 連結各路徑的目錄名稱，若置於最前方，則代表根目錄 --- ### 範例 目錄路徑為下： ``` / --- dzif --- textbook --- 0324.html | | | | | --- 0407.html | | --- images --- 0324-0.png | | --- 0324-1.jpg | | --- 0407-0.webp ``` --- 假設要在`0324.html`中引用`0324-1.jpg`，則路徑可以這樣寫： ``` ../images/0324-1.jpg ```