在 hexo 內正確顯示圖片

文章目錄

1. 1. 情境
   1. 1.1. 絕對路徑
   2. 1.2. 相對路徑
   3. 1.3. 外部圖片空間
2. 2. 結論
3. 3. 參考連結

情境

今兒個一直覺得為什麼圖片沒有辦法正常顯示哩?

使用 markdown 本身的圖片語法在 VSCode preview 是沒問題的呀，但 deploy 到網站上之後，卻沒有正常顯示圖片，怪怪！

不過，其實從圖片的網址以及 github 上的資料夾結構就能看出一二，再加上請出 Google大神，一查之下才知道，原來要在 hexo 上正確顯示圖片，有三種方式：

絕對路徑

• 使用 markdown 的圖片語法是得將圖片放在 source/圖片路徑，才能在 hexo 上正確顯示。

這是什麼意思呢，就是說 source/_posts 底下是相對路徑，無法直接寫 ![](圖檔) 來顯示，而是要寫 ![](/圖片路徑/圖檔)，使用 根目錄 / ( = source這一層) + source/圖片路徑 的 圖片路徑，才能正確顯示。

相對路徑

• 調整設定 _config.yml 內的 post_asset_folder : true，讓 hexo 能使用相對路徑取得圖檔，配合 的語法，再把圖檔放在 source/_posts/post-name/ 底下就能正常顯示。

這是什麼意思呢，就是說當設定是 true 時，hexo new post-name 產生新文章的同時，hexo 會自動在source/_posts/ 底下產生 post-name 的資料夾，並且使用語法讓文章可以引用資源。

目前有三種資源可以使用：

--- 沒用過
{% asset_path slug %}
--- 載入圖片資源  
{% asset_img 圖檔 [標題(可有可無)] %}
--- 沒用過
{% asset_link slug [標題(可有可無)] %}

外部圖片空間

• 除了本地的檔案，也可以使用一些免費的圖片空間，當上傳圖片後，會獲得一串網址，再將那串網址放到文章內，就能顯示了

這部分不打算嘗試，所以就不測試囉！

結論

圖片是文章的一部分的靈魂，只有顯示叉燒包而沒有顯示圖，會讓人一直覺得焦慮呀 XDDD

又學了一些，讚讚

參考連結

• 官網
• 大神