DEV Community

Cover image for Stop Fixing Broken Image Paths: Meet Auto Image Path Updater for VS Code
Mania Meister
Mania Meister

Posted on Edited on Originally published at lonealpha.in

Stop Fixing Broken Image Paths: Meet Auto Image Path Updater for VS Code

#vscode #webdev #productivity #javascript

Reorganizing asset folders is one of those routine development tasks that often turns into an unexpected game of find-and-replace.

You move assets/images/hero.webp into assets/hero.webp, only to find out your CSS background-image: url(...), React import, and Markdown documentation all broke.

To solve this, I built Auto Image Path Updater, a lightweight VS Code extension that automatically updates image paths the moment you move a file.

The Problem with Manual Asset Relocation

  1. Multiple Syntaxes: Modern web apps reference images in different ways: HTML <img src>, CSS url(), JS/TS import, and Markdown.
  2. Path Complexity: Tracking relative offsets (../../) or root-relative paths (/illustrations/) manually is error-prone.
  3. Collision Risk: If you have multiple files named icon.png or logo.png, bulk find-and-replace can easily corrupt unrelated code.

How Auto Image Path Updater Solves This

The extension listens for file move events within your workspace and handles the path rewrites automatically.

Supported File Types & Syntaxes:

  • HTML: src, href, and srcset attributes
  • CSS / SCSS: background-image: url(...) (quoted or unquoted)
  • JS / TS / JSX / TSX: Static and dynamic import statements
  • Markdown: ![alt text](path) syntax
  • JSON: Configurations referencing image paths

Smart URL & Root-Relative Handling

For frameworks like Next.js, Vite, or React where images reside in a public/ directory and are referenced via root-relative paths (e.g., url("/illustrations/bg.webp")), the extension automatically recalculates the public URL path without breaking your project structure.

Quick Demo

Installation & Setup

No setup or configuration is required!

  1. Open VS Code.
  2. Press Ctrl+P (or Cmd+P on macOS) and type: 
   ext install DeepakKN.auto-image-path-path-updater
Enter fullscreen mode Exit fullscreen mode
  1. Move any image file across your workspace folders, and your files will update instantly.

Open Source

The project is fully open-source. Contributions, stars, and feedback are always welcome:

⭐ GitHub: Auto Image Path Updater Repository

📦 Marketplace: Auto Image Path Updater VS Code Extension

What features or framework integrations would you like to see next? Let me know in the comments!

Top comments (0)