文章目錄

• 說明
• 基礎語法
• 插入本地圖片
• 插入網路圖片
• 把圖片存入 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 的亂碼看著不美觀**