Problem
It is a built-in function in vscode to paste image from Clipboard into markdown file. However, the behaviour is like this when you simply ctrl+v
:
This default behaviour has two problems:
- Sometimes you want your directory consists of only
md
files. - images should sit inside static file directory.
Use Paste Image Plugin
-
First we install the Paste Image plugin:
-
Next in our project (blog project, documentation project, etc) we add
// .vscode/settings.json { "pasteImage.path": "${projectRoot}/static/img", "pasteImage.basePath": "${projectRoot}", "pasteImage.forceUnixStyleSeparator": true, "pasteImage.prefix": "/", "pasteImage.insertPattern": "${imageSyntaxPrefix}/img/${imageFileName}${imageSyntaxSuffix}" }
-
Here
pasteImage.path
is your image destination (to be saved). -
Here
pasteImage.insertPattern
is the path that will be inserted into yourmd
file. -
Now you can paste your image from clipbaord by
ctrl+alt+v
. -
For example:
"pasteImage.insertPattern": "${imageSyntaxPrefix}/assets/img/${imageFileName}${imageSyntaxSuffix}"
produces me a link (because
"pasteImage.prefix": "/"
):
and my project will transform this url to some public asset file path.