VSCode 上直接黏貼上傳圖片到 Imgur

發表於 2019-05-19 分類於 VSCode

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

由於自己在撰寫文章已經轉至使用 VSCode，但是圖片空間說實在每次都要透過 Imgur 網站上傳再複製網址貼到 md 內實在很不方便，這邊剛好找到一個套件覺得超強的，範例就像這樣

前言

所以這邊紀錄一下該如何安裝及使用

首先先開啟 Imgur 並註冊登入帳號，然後點這個網址來申請 Imgur API

然後填寫圖片紅框欄位。

送出之後就會得到兩個東西，請務必複製留下來。

如果不小心遺失了就從這裡看，但 Client secret 就必須重新生成。

※注意網頁先不要關，稍後還會用到。

接下來要安裝插件，到擴充去搜尋 vscode-imgur，然後安裝插件。

接下來開啟 VSCode 設定檔，一般來講是 Ctrl + , (Window)或者設定 > 然後找有 settings.json 的都可以。

打開後將下面程式碼貼進去

1
2
3

"vscode-imgur.client_id": "剛剛 imgur 的 client_id",
"vscode-imgur.client_secret": "剛剛 imgur 的 client_secret",
"vscode-imgur.preferUserUpload": true,

接下來去隨便找一個圖片點右鍵複製圖片

然後再 VSCode 的 md 中按下 CTRL + ALT + V，接下來會卡住然後跳出這個視窗

這時候切回去畫面，它會跟你說有人 vscode-imgur 要使用來上傳圖片，所以你要按允許。

接下來畫面會出現一組 PIN，複製下這組 PIN

將這組 PIN 貼近這裡

這樣圖片就可以上傳啦~~

如果希望上傳的圖片可以分類，請先進入 Imgur 開啟相簿

依照欄位填寫即可，下方選項看個人，我是使用 public

開啟之後我建議先丟一張圖片上傳，上傳完再點上方 gallery profile

然後再點 Albums

如果你剛剛有先上傳一張圖片的話，你就可以看到第一張圖片，點進去。

點進去後取得網址列最後的相簿代碼，這邊範例是 d7B2zub (a/之後)，記住這個代碼

回到 VSCode 打開 settings.json 將這行貼上

1	"vscode-imgur.album_id": "相簿代碼", // 我的範例就是 d7B2zub

這樣就大功告成啦~~可以嘗試在 VSCode 直接黏貼圖片吧~~