VS Code - Drag image from Explorer pane into markdown file and drop as path

Question

In Visual Studio Code, from the Explorer pane, how can I drag a PNG file from my images folder and drop it in place in a markdown file, so that VS Code inserts the path to the dropped image?

Currently, VS Code just opens the image in a new tab.

I've reviewed the suggested answers, as well as the available markdown extensions, with no luck finding an answer.

Any assistance is appreciated!

Milan

Answer 1

I've looked it up everywhere too, bharath is entirely correct, for now you could just use right click -> copy path and paste it, It's quite tedious compared to a drag and drop solution, but Hopefully there would be an asset for that, If someone made this: https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image

definitely something similar for just dragging and dropping would be possible

Herodotus

Answer 2

It seems like this is not possible yet in vscode as compared to visual studio. There seems to be a pending feature request on their GitHub issues page (link below) which was opened long back and not yet closed.

https://github.com/Microsoft/vscode/issues/5240

Declinatory

Answer 3

It should be in vscode v1.67 - it is in the Insiders Build now.

And see the v1.67 Release Notes: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_67.md#markdown-drop-into-editor-to-create-link:

You can now quickly create markdown links by dragging and dropping files from VS Code's explorer into a markdown editor. Simply hold Shift while dragging the file over a markdown editor to drop it into the editor and create a link to it:

If the file looks like an image, we will automatically insert an markdown image. Otherwise we add a normal markdown link.

This also works when dragging some types of files from other applications, such as dragging and dropping images from a web browser:

1. enable Workbench > Editor > Drop Into Editor: Enabled

That allows you to Shift drag an image file into an editor without opening a new editor of that image.

2. enable Markdown > Editor > Drop: Enabled

---

Also see v1.68 Release Notes, pasting an image or file to create a link:

Paste files to insert Markdown links

We've added experimental support pasting to insert images or file links in markdown.

This requires enabling "editor.experimental.pasteActions.enabled": true. You can currently copy files from the VS Code explorer. Pasting image files inserts image references while pasting normal text files inserts links to those files.

Bull

I'm glad they made the feature built-in. For some reason my "relative" path that gets inserted starts with  – Greywacke

why pressing shift? why not just drag and drop? – Benthamism

@Benthamism The shift is necessary if you want a link - otherwise vscode simply opens an editor with the file you dropped - that has worked that way for a long time and I don't think they want to change it. – Bull

Answer 4

subject: If you want an image in any folder of your vscode. simply follow the steps. 1.Go to vscode then right click on a folder in which you want your image and then choose reveal in file explorer. After that you can simply copy your image into the vs code folder.

Exhort