Greatly simplifies working with images in md file in VSCode, and IMO one of the best ways to create blog post md in VSCode

When working on a blog post that is written in .md, adding an image in the .md file can be tedious.

You can point to an image by its URL:

![alt-text](<url-of-image>)

Alternatively you can place the image locally in static folder in hugo project root, as described in How to add image to a Hugo blogpost

As a improvement in the above workflow, following can be used additionally to automate storing of image in appropriate directory (project-root/static/<dir-of-post>/img1.png) and using its reference in the blog post md, i.e.:

![alt-text](/<dir-of-post>/img1.png)

Setup

  1. Install the VSCode plugin Paste Image

Overview of features from official documentation: paste-image-vscode-plugin

  1. Use following configs:

Update these configs in your workspace settings.json file in VSCode (press F1 and search for Open Workspace Settings (JSON))

  "pasteImage.path": "${projectRoot}/static/${currentFileNameWithoutExt}",
  "pasteImage.basePath": "${projectRoot}/static",
  "pasteImage.prefix": "/",
  "pasteImage.namePrefix": "${currentFileNameWithoutExt}_",

Now we are ready to start pasting images from clipboard in MD files.

Usage

  • Use Greenshot or any snip software to copy a sample screenshot (example Shift + Win + S on Windows). We will paste this in the md file.

  • Paste in md file in VSCode using Ctrl + Alt + V

What this does

  1. Creates a folder with name of your post article in /static folder. This new folder will be used by the plugin to store any subsequent images that you paste when working on this md file.
  2. Creates an image file for the pasted image under the folder.
  3. Adds the relevant image link to the created image file in md file with correct relative path /<folder-for-article>/<image-file.png>