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

前言

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

圖片

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

Imgur

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

然後填寫圖片紅框欄位。

  • Application name:隨便想,最好自己可以認得
  • Authorization type:OAuth 2 authorization without a callback URL

圖片

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

  • Client ID
  • Client secret

圖片

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

圖片

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

VSCode

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

圖片

接下來開啟 VSCode 設定檔,一般來講是 Ctrl + , (Window)或者 設定 > 然後找有 setting.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

  • public 公開
  • Hidden 隱藏
  • Secret 秘密(上鎖?

圖片

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

圖片

然後再點 Albums

圖片

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

圖片

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

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

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

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

Liker 按讚 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點牡蠣鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)機制,一個人一篇文章最多只能按五下拍手,如果你願意按個讚,對於創作者是一個莫大的鼓勵。

Google AD