Drop Image

Drop Image is a VS Code extension for React + Vite projects that lets you drag an image from Finder or File Explorer directly into a .tsx or .jsx file.

For v0.1.0, the extension:

• supports typescriptreact and javascriptreact
• copies dropped images into your workspace
• creates the target folder automatically if needed
• sanitizes file names
• avoids overwriting duplicate files
• generates an import statement
• inserts <img src={...} alt="" /> at the drop position

Supported image formats:

• .png
• .jpg
• .jpeg
• .webp
• .gif
• .svg

Settings

The extension contributes these settings:

{
  "imageDrop.importTargetFolder": "src/assets/images",
  "imageDrop.pathTargetFolder": "public/assets/images",
  "imageDrop.pathMode": "alias",
  "imageDrop.alias": "@",
  "imageDrop.insertMode": "import",
  "imageDrop.importJsxTemplate": "<img {{{srcAttribute}}} alt=\"{{{alt}}}\" />",
  "imageDrop.pathJsxTemplate": "<img {{{srcAttribute}}} alt=\"{{{alt}}}\" />"
}

• imageDrop.importTargetFolder Workspace-relative folder where dropped images are copied in import mode.
• imageDrop.pathTargetFolder Workspace-relative folder where dropped images are copied in path mode. This must stay inside public/.
• imageDrop.pathMode Import path mode: alias or relative.
• imageDrop.alias Alias prefix used when pathMode is alias.
• imageDrop.insertMode Insert using import or direct path.
• imageDrop.importJsxTemplate JSX template used in import mode. Must include {{{src}}} or {{{srcAttribute}}}.
• imageDrop.pathJsxTemplate JSX template used in path mode. Must include {{{src}}} or {{{srcAttribute}}}.

Legacy fallback settings still work:

• imageDrop.targetFolder
• imageDrop.jsxTemplate

Commands And Shortcut

• Image Drop: Toggle Insert Mode Toggles between import and path, then shows the active mode.
• Image Drop: Set Import Mode Switches directly to import.
• Image Drop: Set Path Mode Switches directly to path.

Default shortcut:

Ctrl+K I
Cmd+K I

Press the shortcut before dragging an image to switch the mode used by the next drop.

Supported JSX template placeholders:

• {{{srcAttribute}}} A complete src attribute. In import mode this becomes src={heroBanner}; in path mode it becomes src="/assets/images/hero-banner.png".
• {{{src}}} The image source value only. In import mode this becomes something like heroBanner; in path mode it becomes a quoted string like "/assets/images/hero-banner.png".
• {{{alt}}} The generated alt text. For MVP this is an empty string.
• {{{fileName}}} The final copied file name, such as hero-banner.png.
• {{{variableName}}} The generated import variable name, such as heroBanner. This is empty in path mode.

If you want output like:

<img src="https://github.com/huan572001/drop-image-extention/raw/HEAD/assets/images/hero-banner.png" alt="" />

use:

{
  "imageDrop.pathTargetFolder": "public/assets/images",
  "imageDrop.pathJsxTemplate": "<img {{{srcAttribute}}} alt=\"{{{alt}}}\" />"
}

If you want output like:

<Image src={heroBanner} alt="" width={1200} height={630} />

use:

{
  "imageDrop.importJsxTemplate": "<Image src={{{src}}} alt=\"{{{alt}}}\" width={1200} height={630} />"
}

Example

Before:

export default function App() {
  return (
    <div>
    </div>
  );
}

After dropping Hero Banner.png:

import heroBanner from "@/assets/images/hero-banner.png";

export default function App() {
  return (
    <div>
      <img src={heroBanner} alt="" />
    </div>
  );
}

Development

Install dependencies:

npm install

Build the extension:

npm run build

Run in Extension Development Host:

1. Open this folder in VS Code.
2. Run npm run build.
3. Press F5.
4. In the Extension Development Host, open a React .tsx or .jsx file.
5. Hold Cmd + Shift while dragging an image from Finder or File Explorer into the editor.

Usage Notes

• VS Code has a default file-drop behavior that may open the dropped image instead of sending it to the extension.
• To force the drop into the editor so Drop Image can handle it, keep holding Cmd + Shift while you drag and drop the image.
• Use Ctrl+K I on Windows/Linux or Cmd+K I on macOS to toggle between import and path before dropping.
• Drop the image inside JSX in a .tsx or .jsx file for the clearest result.

Publishing

This repository is prepared for publishing to the VS Code Marketplace.

Typical commands:

npm install
npm run build
npm run package:vsix

Before publishing:

• make sure the publisher field in package.json matches your real Marketplace publisher ID
• review CHANGELOG.md
• verify the Marketplace metadata in package.json

MVP Scope

v0.1.0 supports:

• React
• Vite
• .tsx
• .jsx
• local image files dropped from the operating system

Known MVP limitations:

• no Vue, Svelte, Astro, Angular, or Next.js support
• no multi-image drop
• no image optimization or resizing
• no remote upload or cloud integration
• no AI-generated alt text