Hexo 圖片顯示異常路徑修正紀錄

發表於 更新於 分類於 閱讀次數：

前言

最近心血來潮，想將多年未更新的 Hexo 版本從 4.1 升級到 7.0，順帶更新到最新版本的 Next Theme，在更新的過程中，無意間又發現了一個坑…

原來 Hexo 不知從何開始已經正式導入 Markdown 語法插入圖片了，所以導致在 Hexo 4.2.0 late 版本，使用 hexo-asset-image 作解決方案時會產生絕對路徑的 Bug。

要解決這個問題，最好的解決方式當然是移除 hexo-asset-image 即可，但是依照官方的設置方式，又會發生一個讓我覺得困惑的狀況…

以下為官方的建議設置方式：

使用 Markdown 嵌入圖片

hexo-renderer-marked 3.1.0 引入了一個新的選項，其允許你無需使用 asset_img 標籤插件就可以在 markdown 中嵌入圖片

如需啟用：

1
2
3
4
5
# _config.yml
post_asset_folder: true
     marked:
       prependRoot: true
       postAsset: true

啟用後，資源圖片將會被自動解析為其對應文章的路徑。
例如： image.jpg 位置為 /2020/01/02/foo/image.jpg ，這表示它是 /2020/01/02/foo/ 文章的一張資源圖片， ![](image.jpg) 將會被解析為 <img src="/2023/11/11/Hexo_圖片顯示異常路徑修正紀錄/2020" > 。

依照上述最後一段話的敘述，你會發現所放置的圖片必須放在與文章相同的資料夾下，才能正常被解析為<img src="/2023/11/11/Hexo_圖片顯示異常路徑修正紀錄/2020" >，如果你是將圖片放置在文章的次資料夾中，是無法被順利解析的，它所解析的路徑會變成<img src="/2023/11/11/Hexo_圖片顯示異常路徑修正紀錄/image.jpg" >，下是一個實例。

圖片放在文章的次資料夾中如下

插入的路徑為 {% asset_img "sray Logo.jpg" "sray Logo" %}

而實際上網頁顯示圖片的路徑會變成 https://shuwn.dev/2023-11-11-Hexo_圖片顯示異常路徑修正紀錄/sray Logo.jpg

而正確的圖片路徑應解析為 https://shuwn.dev/2023/11/06/2023-11-11-Hexo_圖片顯示異常路徑修正紀錄/sray Logo.jpg

以官方原先的設置必須將圖片放在文章相同的資料夾中如下

才會取得正確的圖片路徑 https://shuwn.dev/2023/11/06/2023-11-11-Hexo_圖片顯示異常路徑修正紀錄/sray Logo.jpg

這完全不符合日常圖文管理方式，而且官方上述設定 post_asset_folder: true，主要是讓你在利用 hexo new paper 指令建立文章的同時，自動建立好資源圖片的資料夾，如果只限定需要將圖片放在與文章同個路徑下才能正常解析，這真的蠻奇怪的？？？

所幸我後來很快的找到了一個解決方式，我們可以保有既有的官方設置方式，在額外安裝一個 hexo-image-link Pluge，即可解決這個問題。

按照以下步驟進行安裝

  1. 輸入以下指令安裝 hexo-image-link Pluge

    1
    npm install hexo-image-link --save

  2. 打開 Hexo 的 ‘_config.yml’ 進行設置，確認配置如下

    1
    2
    3
    4
    5
    # _config.yml
    post_asset_folder: true
        marked:
        	prependRoot: true
            postAsset: true

  3. 接下來輸入以下指令重新生成靜態網頁，現在即可正常顯示圖片了！

    1
    2
    3
    $ hexo clean # 清除既有靜態檔案
    $ hexo g # 重新生成靜態網頁檔案
    $ hexo d # 重新推送檔案到伺服器