Markdown中插入圖片有什麼技巧？

01-05

語法說明中是以鏈接的形式插入，但在本地編輯一個文檔的話就會圖和文檔分離（類似下載後的html網頁），使用不便，有什麼好辦法解決嗎？

利用github存儲圖片，在markdown引用圖片鏈接地址

步驟如下：

1.將markdown需要用的圖片放到git倉庫中，發布到github上

2.訪問github倉庫,smshen/MarkdownPhotos · GitHub

3.訪問圖片MarkdownPhotos/test.jpg at master · smshen/MarkdownPhotos · GitHub

4.點擊Raw按鈕

5.拷貝鏈接地址https://raw.githubusercontent.com/smshen/MarkdownPhotos/master/Res/test.jpg

6.在Markdown中引用圖片，![Aaron Swartz](https://raw.githubusercontent.com/smshen/MarkdownPhotos/master/Res/test.jpg)

使用相對路徑插入圖片。比如你把一個叫做1.png的圖片和*.md文件放在一起，那麼你就可以用這種方式插入圖片：![](1.png)

如果不想放在同一層級,那麼就可以這樣插入:![](foldername/1.png) 表示引用同層級一個叫做"foldername"的文件夾中的1.png圖片,以此類推.

應該所有markdown軟體都支持這種語法吧，我用過的Mou ,macDown,Visual Studio Code等等是支持這種寫法的。最大的優點就是不需要網路，做到本地存放圖片。(Ulysses這種程序自己管理圖片資源的軟體最好不要這麼干.)

同理可以用絕對路徑，不過不推薦。(如Windows中寫 C:1.png)

PS:更奇葩一點的做法就是，自己開一個本地伺服器，自己做本地圖片鏈接。。。

最後，給國人打個廣告，MacOS上牆裂推薦使用MWeb!

同樣可以軟體內部管理的還有Ulysses，比較貴，我目前是和MWeb一起用的，各有優勢。(Ulysses可以直接把不太複雜HTML轉為Markdown，有MWeb缺少但是正在做的iOS客戶端)

===== 2016.10.22 Update =====

如果一定要用外鏈(http/https鏈接)，在macOS平台上可以用iPic把剪切板中的圖片一鍵生成外鏈，然後將上傳的鏈接以Markdown形式的語法再寫回剪切板。圖床包括微博，七牛，Amazon，阿里雲，Imgur等。但是需要注意的是，務必要保存一份在本地，不然一旦圖床被牆或關閉服務...

===== 2017.1.5 Update =====

MWeb For iOS已經出了，內購半價優惠中。

PS:現在有一種格式叫做TextBundle獲得了不少的知名筆記軟體的支持，Welcome to TextBundle.org!，比如Ulysses，Bear等等，主要適合於iOS/macOS系統的沙盒環境在應用之間的文件共享，MWeb作者說在開發中 textbundle？ · Issue #528 · oulvhai/MWeb-issues 。用這種方案意味著有一種統一的格式處理md文件和附件(如圖片)的位置關係了。

新浪微博

Markdown插圖片有三種方法，各種Markdown編輯器的插圖方式也都包含在這三種方法之內。

插圖最基礎的格式就是：

![Alt text](圖片鏈接 "optional title")

Alt text：圖片的Alt標籤，用來描述圖片的關鍵詞，可以不寫。最初的本意是當圖片因為某種原因不能被顯示時而出現的替代文字，後來又被用於SEO，可以方便搜索引擎根據Alt text裡面的關鍵詞搜索到圖片。
圖片鏈接：可以是圖片的本地地址或者是網址。
"optional title"：滑鼠懸置於圖片上會出現的標題文字，可以不寫。

1. 插入本地圖片

只需要在基礎語法的括弧中填入圖片的位置路徑即可，支持絕對路徑和相對路徑。

例如：

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

缺點是不靈活不好分享，本地圖片的路徑更改或丟失都會造成markdown文件調不出圖。

2.插入網路圖片

只需要在基礎語法的括弧中填入圖片的網路鏈接即可，現在已經有很多免費/收費圖床和方便傳圖的小工具可選。

例如：

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

缺點是圖片存在網路伺服器上，非常依賴網路。

3.把圖片存入markdown文件

用base64轉碼工具把圖片轉成一段字元串，然後把字元串填到基礎格式中鏈接的那個位置。

基礎用法：

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

這個時候會發現插入的這一長串字元串會把整個文章分割開，非常影響編寫文章時的體驗。

如果能夠把大段的base64字元串放在文章末尾，然後在文章中通過一個id來調用，文章就不會被分割的這麼亂了。就像寫論文時的文末的注釋和參考文檔一樣。

這個想法可以通過markdown的參考式鏈接語法來實現。

進階用法如下：

文中引用語法：

![avatar][doge]

文末存儲字元串語法：

[doge]:data:image/png;base64,iVBORw0......

這個用法不常見，比較野路子。優點是很靈活，不會有鏈接失效的困擾。缺點是一大團base64的亂碼看著不美觀。

推薦生成圖片外鏈神器 - iPic

用 Markdown 寫文章最苦惱的其實就是圖片鏈接了，iPic 是一個為圖片生成外鏈的神器，支持將圖片匿名上傳到微博圖床（免費）、付費後還支持更多圖床（七牛、Flickr、Imgur 等），但是免費的新浪圖床就已經很好用了！

iPic 支持上傳圖片完成之後，自動複製生成外鏈到剪貼板，還支持直接生成 Markdown 的圖片鏈接，我們連插入圖片的語法也不用寫啦。

使用Markdown語法插入一張圖，大概要經過以下幾個步驟：

截圖保存圖片到本地
打開並登陸註冊好的圖床網站
上傳圖片至圖床
複製生成好的圖片地址
用Markdown語法插入圖片

如果插入圖片過多，這樣來回操作多次，簡直要崩潰！經過網上搜索，貌似有2種解決方案：

付費購買此類軟體
自己寫一個小工具，簡化工作

我屬於第二種，自己寫了個Alfred插件：

主要功能就是：複製本地圖片或截圖，快速上傳圖片至七牛雲空間，並獲取Markdown格式的圖片地址。

依賴

七牛圖床（註冊方式見官網）
Mac平台
付費版Alfred

功能特點

支持複製本地圖片獲取圖片鏈接
支持截圖獲取圖片圖片鏈接
支持gif格式
操作結果會在通知欄顯示

如何使用

下載alfredworkflow插件，雙擊安裝即可
複製本地一張圖片(格式為：jpg、png、gif)，或截一張圖
打開任意編輯器，按下option + command + v快捷鍵
自動插入上傳後的圖片鏈接

說明：第一次操作：需設置七牛的相關參數，按下快捷鍵後，會自動打開配置文件，填入配置即可。

插件下載地址：

https://github.com/kaito-kidd/markdown-image-alfred/releases/download/v1.1.3/Markdown.image.alfredworkflow

github項目地址：

GitHub - kaito-kidd/markdown-image-alfred: 複製本地圖片或截圖，快速上傳圖片到七牛雲空間，並獲取Markdown格式的圖片地址。

博客地址：Markdown快速插入圖片工具

可以用Google+，但由於一些眾所周知的原因還是不推薦

隆重引出有中國特色的登錄 - 七牛雲存儲，插圖步驟如下：

在七牛空間→內容管理中上傳圖片，找到圖片外鏈
Markdown里插入圖片即可：![描述](圖片鏈接)

插入外鏈的圖片，無論你Markdown帶到哪都能正常顯示，而且這個網站速度國內

這個七牛雲存儲，申請用戶給1G，完成身份驗證每月10G流量

可以點我邀請鏈接註冊哦親~

註冊新用戶 - 七牛雲存儲

可以試試這個方法，比較適合geek

簡化markdown寫作中的貼圖流程

-------------------

分界線，第二次更新

經歷自己的動手實踐，這個方法非常好使，在寫markdown中，效率大大提高，自己也寫了一個日誌，基於alfred的自動化圖片處理實踐總結，大家可以看看，有問題可以聯繫我~

推薦拿七牛做圖床，然後用這個工具做前端首頁 - 極簡圖床

推薦使用我的作品：極簡圖床 - 全球CDN加速, 支持外鏈、不限流量的免費圖床

支持截圖後直接粘貼的方式上傳圖片，支持拖動文件上傳，一鍵複製 Markdown 鏈接。當然，可以自定義七牛賬號，直接上傳到自己的七牛空間上，免去折騰的麻煩。

2017.06.16更新

前段時間對markdown的一鍵貼圖小工具做了一些優化，直接做成一個exe的可執行小程序，使用非常簡單，下載後只需配置四個參數即可直接使用，無需單獨安裝任何執行環境。

使用預覽：jiwenxing/qiniu-image-tool-win

使用教程：windows版本markdown一鍵貼圖工具（適用2.x及以上版本）

下載地址：jiwenxing/qiniu-image-tool-win

另外如果使用mac，還提供了基於Alfred的workflow，使用同樣非常簡單，導入後配置四個環境變數即可

使用預覽：jiwenxing/qiniu-image-tool

使用教程：使用alfred在markdown中愉快的貼圖

下載地址：jiwenxing/qiniu-image-tool

對了，忘了告訴你，截圖、網路圖片、本地圖片都支持哦，不限格式、不限形式，甚至js、css、小電影、word、excel統統都能一鍵上傳(￣┰￣*)

說用圖床的，要麼是圖床的托，要麼就是根本就沒有研究明白。

在repository的根目錄下建立文件夾，然後將圖片放在其中，在寫鏈接的時候直接使用自己的

GitHub Pages根路徑加圖片地址訪問即可。例如：

![xxxxxx](https://xxxxxx.github.io/項目名稱/images/圖片名稱.png)

使用搜狗輸入法的截圖工具加上極簡圖傳，超級方便.

2.截圖

3. 打開極簡圖床 - 全球CDN加速, 支持外鏈、不限流量的免費圖床

4. ctrl +v

5. 點擊markdown 就可以複製了

以下圖片是剛剛測試的...

http://i1.piimg.com/588926/f133d1d3508f53dc.png

把圖片轉base64，然後把代碼插入，親測有效。

缺點就是編輯的時候一堆代碼。

那些把圖片放在別人的伺服器里的方法，要是哪天鏈接失效了呢。

我之前插入圖片也摸索了好半天，現在感覺比較簡單的解決方法是：先找一個網路分享軟體，我選擇的是CloudApp，最好的是Droplr（但是不知道為什麼我用不起）；然後把圖片放進去，生成一個網址；最後把網址複製到markdown的代碼中：![alt text](放這個位置 "Title")，就OK了～

今天在知乎看到這個問題，發現居然有人引用了我的博客，我也來怒答一波吧。

先送上我自己博文的原始地址，大家也可以跳轉過去閱讀利用Alfred Workflow快速上傳粘貼板圖片至七牛圖床並在Markdown中引用 · K. Chen。

--- 這是一條奇怪小尾巴

我是一個 Markdown 的重度依賴患者，不管寫點什麼都會想著用 Markdown 來記錄，因為實在是太方便，只要有個記事本就可以開心的使用了，基本上沒有什麼軟體硬體的要求。但是大家都知道，Markdown 插入圖片真的讓人頭疼，網上找的圖片還好說，粘貼一個圖片地址就好了，可是如果你想要插入一下本機的圖片，沒有一個好的圖床那是萬萬不行的。

說起圖床我歪樓來推薦一下：

七牛雲存儲 - 國內大公司雲空間，各網速度都挺快
https://t.williamgates.net - 簡單好用，速度看網路
Photo Bucket - 據說是BBC官方圖床

個人最喜歡的圖床是七牛，因為圖片預處理做的真的極好。圖床是有了，可是平常要插入個圖片也非易事：

截個圖存在桌面
打開七牛雲存儲的網站，上傳圖片
複製圖片地址
在Markdown中使用![]()語法調用圖片插入
填寫圖片地址
如果你使用原圖保護功能，還需要自己添加樣式符

為了一張插入圖片，真是心力交瘁。如果插入量巨大，真是不堪重負。所以我們需要使用一個工作流來一鍵幫我們完成這些複雜的機械化的工作。本教程實現的目標是：

截圖到粘貼板
快捷鍵插入到Markdown文本

中途甚至不需要任何與編輯文本無關的工作，讓你專心寫作！聽上去是不是很不錯，那就請移步我的博客，查看詳細的教程吧：

利用Alfred Workflow快速上傳粘貼板圖片至七牛圖床並在Markdown中引用 · K. Chen。

小夥伴們自己注意看教程裡面替換自己的本地路徑的講解，不要跟著我填一樣的哈。

--- 另一條奇怪的小尾巴

結束了上面那段快速插入圖片的軟廣告後，我們來重新看看題主的問題

本地編輯一個文檔的話就會圖和文檔分離，使用不便。

這當然是有解決方案的，那就是選擇合適的 Markdown 編輯器了。編輯器之爭我實在是不想參加了，各有各的好吧，但是總體而言分為四大類，各自對圖片插入的理解都是不一樣的，得重點說說，以利於選擇：

純文本類

最原滋原味的 Markdown，代表是各類代碼編輯器和文字編輯器，其中以 Sublime Text 為佼佼者，裝上插件後支持 Markdown 語法著色，最大程度上貫徹 Markdown 形神分離的思想。這類編輯器，你是看不到圖片的。

所見即所得類

最非 Markdown 的一類，代表是 Ulysses，每寫下一個 Markdown 標記自動轉換成排版後的效果，有著最優雅的操作體驗，可是不利於反向解析。這類編輯器其實和 Word 類的編輯器其實已經沒有兩樣了，與其說看不到圖片，不如說你反而看不到圖片的地址了。

雙視圖類

和上面兩種走極端的編輯器不同，現在流行最廣的編輯器是雙視圖類的：左邊是源碼區，負責輸入，所有的編輯工作都在這裡進行；右邊是預覽區，負責輸出，源碼的渲染效果實時顯示在這裡。一般還有同步滾動功能等等。其代表作是馬克飛象和 CMD-Markdown 編輯器（張哥我又在給你的 cmd 打廣告了，快出來給廣告費~~）。這種編輯器市場龐大，選擇十分的多，值得一提的是，上速兩款編輯器都是基於網頁的，走到哪兒，寫到哪兒，當然離線也可以使用（張哥說他的編輯器還可以做文檔發布，捂臉）。

混合預覽類

最後一種分類其實是一些大型綜合 Markdown 編輯器提供的一種編輯模式，其代表作是 MWeb。這款工具的預覽模式下解決了兩個痛點功能：圖片預覽和表格編輯。圖片預覽就是插入完圖片地址之後，在下方預覽圖片；表格編輯是可以像 Excel 那樣編輯表格，同時轉換為 Markdown Table。

另外，後三種編輯器都是支持直接拖入和粘貼圖片的，MWeb 還支持將本地粘貼的圖片上傳到七牛圖床的功能（我的插件不是白寫了么，掩面(*/ω╲*)。

看到這裡，想必題主心中也應該有數了。Markdown 圖片插入雖然表達和顯示分離，但是還是有很多種方式可以優雅地解決這個問題的，只要你根據自己的喜歡選定了一款趁手的編輯器，我相信你也很快就會愛上 Markdown 的。哈哈哈哈~

建立一個圖片文件夾。用圖片的時候寫 ![圖片名字](圖片文件夾/圖片名.png)

使用相對路徑

![image](picture/1.png)

即可（另外不建議使用數字作為文件名，最好用具體的詞，如plot_sin, sun等

目錄樹：

|-README.md

|-picture

|---1.png

|---2.png

|-post

|-docs

另外補充說明一下，用md文件做網頁時，跳轉返回index代碼：

[back](../)

../表示根目錄

./表示文件所在目錄

我一般是把圖片貼在知乎上的任意一個回答裡面，但在這個回答裡面並不用這個圖，然後取到圖片url插入markdown