如何在文章中加入圖片
步驟一：準備圖片檔案
將你的圖片檔案放入文章資料夾中，與 index.html 放在同一層。
範例：如果你的文章資料夾是 2026-01-04-how-to-add-images/，將圖片（如 photo.jpg）直接放入該資料夾中。
步驟二：使用 img 標籤
在 HTML 檔案中，使用 <img> 標籤來顯示圖片：
<img src="你的圖片檔名.jpg" alt="圖片說明">
範例：
<img src="photo.jpg" alt="美麗的風景照片">
img 標籤屬性說明
必要屬性
- src：圖片檔案的路徑
- 同一資料夾：直接寫檔名，如
src="image.jpg" - 子資料夾：使用相對路徑，如
src="images/photo.jpg"
- 同一資料夾：直接寫檔名，如
- alt：圖片的替代文字
- 當圖片無法顯示時會顯示此文字
可選屬性
- width：設定圖片寬度（單位為像素）
- 範例：
width="500"設定寬度為 500 像素
- 範例：
- height：設定圖片高度（單位為像素）
- 範例：
height="300"設定高度為 300 像素
- 範例：
注意：通常只設定 width 或 height 其中一個，讓圖片按比例縮放，避免圖片變形。
小提示
- 圖片檔名建議使用英文和連字號，避免使用中文、空格和特殊符號
- 壓縮圖片可以加快網頁載入速度