Markdown 插入圖檔

文章目錄

• • 說明
  • 基礎文法
  • 插入本地圖檔
  • 插入網絡圖檔
  • 把圖檔存入 markdown 檔案中

說明

主要參考以下部落格：

• Markdown中插入圖檔有什麼技巧？
• 将圖檔内嵌入Markdown文檔中
• markdown插入圖檔的幾個辦法

基礎文法

![Alt text](圖檔連結 "optional title")
           

• Alt text： 圖檔的Alt标簽，用來描述圖檔的關鍵詞，可以不寫。最初的本意是當圖檔因為某種原因不能被顯示時而出現的替代文字，後來又被用于SEO，可以友善搜尋引擎根據Alt text裡面的關鍵詞搜尋到圖檔
• 圖檔連結： 可以是圖檔的本地位址或者是網址
• "optional title"： 滑鼠懸置于圖檔上會出現的标題文字，可以不寫

插入本地圖檔

• 文法

![avatar](/user/desktop/doge.png)
           

• **優點：**插入本地圖檔隻需要在基礎文法的括号中填入圖檔的位置路徑即可，支援絕對路徑和相對路徑
• **缺點：**不靈活不好分享，本地圖檔的路徑更改或丢失都會造成markdown檔案調不出圖

插入網絡圖檔

• 文法

![avatar](http://baidu.com/pic/doge.png)
           

• 優點： 插入網絡圖檔隻需要在基礎文法的括号中填入圖檔的網絡連結即可
• 缺點： 是圖檔存在網絡伺服器上，非常依賴網絡

把圖檔存入 markdown 檔案中

• 文法

![avatar](data:image/png;base64,iVBORw0......)
           

• 首先用 base64 轉碼工具把圖檔轉成一段字元串
• 然後把字元串填到基礎格式中連結的那個位置

圖檔轉 base64編碼線上工具一

圖檔轉 base64編碼線上工具二

這個時候會發現插入的這一長串字元串會把整個文章分割開，非常影響編寫文章時的體驗。如果能夠把大段的base64字元串放在文章末尾，然後在文章中通過一個id來調用，文章就不會被分割的這麼亂了。

是以可以這樣做：

• 文中引用文法：![avatar][doge]
• 文末存儲字元串文法：[doge]:data:image/png;base64,iVBORw0…
• 優點： 很靈活，不會有連結失效的困擾**
• 缺點： 一大團 base64 的亂碼看着不美觀**