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 直接黏貼圖片吧~

0%