背景介紹
書寫markdown筆記時,如何處理圖片,實在是有些棘手的問題。每一張圖都保存在當前文件夾?
每張圖都自己重命名?每次上傳到cnblogs博客都需要一張一張拖動?markdown已經非常成功
的實現了樣式與內容的分離,但是圖片是二進制文件,說什么也不可能嵌入到純文本文件里的。
不過本文將介紹一種方案,把所有本地的圖片存放在一個固定的絕對路徑里,軟件自動隨機重命名
圖片,不會導致文件名重復,並且利用騰訊雲COS,在騰訊服務器上建立圖床,完美實現,本地.md
文檔與線上markdown博客,無縫連接。
准備工具
統一把需要准備工具的東西放在這里,隨后逐步會介紹每項工具的作用。
vnote(markdown編輯器) https://github.com/tamlok/vnote
COSBrowser https://cloud.tencent.com/document/product/436/11366
vnote圖片路徑配置
首先下載並安裝vnote,在設置界面里設置好圖片存放的外部文件夾(絕對路徑),如下圖所示。可以看到雖然是
windows平台但是文件的路徑分割符,不是用撬棍(),而是正常的斜線D:/as4k/xmd-img/_v_images/
,這樣
配置以后,不論是使用類似QQ截圖軟件,還是直接在資源管理器中復制粘貼圖片到vnote編輯器中,我們所有的圖
片都會自動放到我們配置好的絕對文件路徑中,在編輯器中生成的路徑是下面這樣

效果就像下面這樣
上圖有一個文件名是帶中文明顯與其它文件名不一樣,這是因為在往vnote中復制圖片的時候,
修改了文件名導致,建議最好直接使用隨機文件名即可,如果需要自定義圖片標識,可以放到
圖片的中括號里。
到這里,想必有markdown使用經驗的讀者都會感受到,單憑強大的復制粘貼圖片到編輯器中的功能,
這款vnote編輯器有尤其使用價值了,畢竟我們移動.md
,再也不用擔心里面的圖片因為路徑
不正確,從而無法正常顯示的問題了,當然這還不是本篇文章的重點,不使用vnote編輯器也無妨,
重點是接下來的騰訊雲COS的應用。
使用騰訊雲COS搭建圖床
大家不要一看到圖床就蒙圈了,圖床就是一張圖片使用網址的形式來表示而已。
打開https://cloud.tencent.com/product/cos
,創建一個自己騰訊雲COS儲鐵桶,功能是免費的,
只是有流量限制,使用自己的QQ號登錄即可,大致流程如下圖
在騰訊COS上創建完畢自己的存儲桶之后,就相當於已經擁有了一個在線存儲文件的平台,就像百度網盤一樣,
所不同的是每個文件都對應一個URL網址。我們知道,在markdown編輯器中,添加圖片使用本地文件和網絡圖片
地址都是可以的。在線往騰訊COS上傳圖片就是鼠標點點點的操作,不多說了,大家可以自行體驗下,可以想象
如果每個文件都需要打開瀏覽器在線上傳,麻煩程度不言而喻,因此我們使用COSBrowser,這款騰訊官方提供的
上傳工具來上傳文件。
使用COSBrowser同步本地和服務器上的圖片
首先在這里https://console.cloud.tencent.com/cam/capi
,獲取API密鑰,就是用來驗證用的。
打開COSBrowser軟件,輸入密鑰后,成功登錄。下面重點來了,到目前位置我們的圖片都在本地,格式如下

現在只要把圖片通過COSBrowser軟件,簡單的復制上傳到存儲服務器上,最重要的是圖片文件名不變,在我們把文檔
發布到 線上博客的時候,使用替換功能即可簡單的把本地圖片替換成網絡URL地址形式的圖片。如果用的是vnote編
寫markdown的, 只需進入閱讀模式,一張張拖放到COSBrowser軟件,即可實現上傳,也可以定位到圖片到目錄,
按時間排序圖片,批量上傳 圖片到COSBrowser軟件上。
圖片在騰訊COS上的地址如下圖所示
本篇博客即是我第一次使用,騰訊COS同步圖片到服務器上,本篇博客的圖片都在這里
粘貼到服務器上效果如下
對比之后可以看到,線上圖片與本地圖片唯一的不通之處就在於,前綴不同。
只需把本地D:/as4k/xmd-img/_v_images//
前綴
替換成https://md-img-1252230138.cos.ap-beijing.myqcloud.com/
即可實現本地圖片與線上圖片無縫連接。
參考資料
騰訊雲對象存儲(COS)官方文檔
https://cloud.tencent.com/document/product/436/7751
COS 標准存儲的用戶免費額度
https://cloud.tencent.com/document/product/436/6240