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

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!



Solution 1:[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

Solution 2:[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

Solution 3:[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:

drop image as a link into a markdown file

  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.

  1. enable Markdown > Editor > Drop: Enabled

drag and drop an image into markdown to get a link

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Omar
Solution 2 bharath
Solution 3