圖片資源目錄

這個目錄用於存放部落格文章中使用的圖片。

目錄結構

images/
├── notes/    # 程式碼筆記相關圖片
├── learn/    # 學習紀錄相關圖片
├── travel/   # 遊記相關圖片
└── misc/     # 雜記相關圖片

使用方式

在 Markdown 文章中引用圖片

# 方式 1：標準 Markdown 語法
![圖片描述](/images/travel/tokyo-tower.jpg)

# 方式 2：HTML img 標籤（可以自定義尺寸）
<img src="/images/travel/tokyo-tower.jpg" alt="東京鐵塔" width="600">

# 方式 3：多張圖片並排（使用 HTML）
<div style="display: flex; gap: 1rem;">
  <img src="/images/travel/photo1.jpg" alt="照片1" width="300">
  <img src="/images/travel/photo2.jpg" alt="照片2" width="300">
</div>

路徑說明

• public 目錄中的文件會被複製到網站根目錄
• 所以 docs/public/images/xxx.jpg 在文章中引用為 /images/xxx.jpg
• 注意路徑開頭的 / 是必需的

圖片命名建議

1. 使用小寫英文和連字符
2. 名稱要有意義，方便管理
3. 可以用日期作為前綴

範例：

• 2025-10-31-tokyo-tower.jpg
• vue-component-lifecycle.png
• coffee-shop-interior.jpg

圖片格式建議

• 照片：使用 .jpg 或 .jpeg（檔案較小）
• 截圖/圖表：使用 .png（品質較好）
• 簡單圖示：可以考慮 .svg（向量圖，可縮放）

圖片優化

建議在上傳前先優化圖片：

• 壓縮圖片大小（推薦工具：TinyPNG, ImageOptim）
• 調整合適的解析度（網頁一般不需要太高解析度）
• 寬度建議：800-1200px 即可