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.targetFolder": "src/assets/images",
  "imageDrop.pathMode": "alias",
  "imageDrop.alias": "@",
  "imageDrop.insertMode": "import"
}

• imageDrop.targetFolder Workspace-relative folder where dropped images are copied.
• 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.

If you want output like:

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

use:

{
  "imageDrop.targetFolder": "public/assets/images",
  "imageDrop.insertMode": "path"
}

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.
• 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 configurable JSX template
• no image optimization or resizing
• no remote upload or cloud integration
• no AI-generated alt text