Jacob Paris
← Back to all content

Paste Image - Favourite VS Code Extensions

I discovered this extension through the Foam recommended extensions

You can find Paste Image on VS Code Marketplace

This extension allows you to paste images directly into your code in any format you want.

The image in the clipboard is saved as a .png into my /public/images folder (where Next.js wants it) and inserts a Markdown image tag like this:

![](/images/vscode-paste-image_2021-06-07-01-17-30.png)

I have configured this locally to the workspace (instead of globally) because each project will have different requirements about where to serve images and how to reference them.

json
1{
2 "pasteImage.path": "${projectRoot}/public/images",
3 "pasteImage.basePath": "/images",
4 "pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
5 "pasteImage.insertPattern": "![](/images/${imageFileName})"
6}
7
Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.