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

為什麼要用本地圖片？

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

  • 第三方圖床說不定哪天就掛掉，本地存放穩定多了
  • 文章和圖片放同一個資料夾，打包備份一次搞定
  • 離線也能看，不用擔心網路連線
  • 圖片跟文章放在同名資料夾，管理起來清楚很多

目前遇到的問題

hexo-asset-image 的狀況

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

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

例如原始路徑：

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

結果變成：

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

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

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

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

目前的解決方案

暫時性解決方案

如果你一定要繼續用這些套件，可以：

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

替代方案：hexo-asset-img

hexo-asset-image 從 Hexo 5 開始就已經失效，套件作者自己也這麼說。
目前改用 hexo-asset-img 後，圖片上傳到 GitHub Pages 有成功。

安裝方式：

1
npm install hexo-asset-img

安裝後，在 Markdown 裡用一般的相對路徑語法插圖即可，套件會自動轉換成 asset_img 格式。

小提醒

  • 裝套件前先確認跟你的 Hexo 版本相容
  • 本地跑 hexo server 確認圖片正常後再發布
  • 善用 Git 版本控制，改壞了還能還原

參考資料