Hexo 圖片外掛套件使用教學與踩雷指南

最近發現圖片處理真的有夠麻煩 (╯°□°）╯︵ ┻━┻
特別是在使用 hexo-asset-image 和 hexo-image-link 這兩個套件時，竟然發現它們在最新版本都有 BUG！？
來分享一下我的經驗，希望能幫大家省下一些除錯時間 (｡･ω･｡)

為什麼要用本地圖片？

在開始之前，先來聊聊為什麼要選擇在本地存放圖片，而不是使用圖床：

  1. 穩定性超重要！第三方圖床說不定哪天就掛掉了
  2. 打包備份超方便！文章和圖片都在同一個資料夾
  3. 離線也能看！不用擔心網路連線問題
  4. 整理方便！圖片跟文章放在同名資料夾，好管理

目前遇到的問題

hexo-asset-image 的狀況

最新版本在處理圖片路徑時會出現以下問題：

  1. 圖片路徑重複出現
  2. 預覽時正常，但發布後圖片掛掉
  3. 有時會莫名其妙多出資料夾層級

例如原始路徑：

1
/2024/03/07/文章名稱/圖片.jpg

結果變成：

1
/2024/03/07/文章名稱/03/07/文章名稱/圖片.jpg

或是 域名是xxx.io的情況下，圖片路徑會從原本/xxx.jpg變成 /.io/xxx.jpg

這個套件也有類似的問題：

  1. 路徑解析錯誤
  2. 某些情況下完全無法顯示圖片
  3. 與新版 Hexo 相容性不佳

目前的解決方案

1. 暫時性解決方案

如果您一定要使用這些套件，建議：

  • 手動修改圖片路徑
  • 在 Markdown 中使用絕對路徑

2. 推薦的替代方案

等等！與其用有問題的套件，不如：

  • 使用其他穩定的圖片處理方案（如 hexo-asset-img）
    按照作者所說，hexo-asset-image從Hexo 5開始已經失效。
    目前改使用hexo-asset-img，圖片上傳到Github Page有成功。

小提醒和建議

  1. 在安裝任何套件前，先確認它跟您的 Hexo 版本相容
  2. 建立文章時先做好備份
  3. 可以先在本地測試看看圖片是否正常顯示
  4. 善用 Git 版本控制，以便需要時可以回復

參考資料