Remote Image Preview (VS Code Extension)

English | 简体中文

Remote Image Preview is a Visual Studio Code extension that allows you to preview remote images on hover and in the editor gutter based on configured CDN and path prefixes. It automatically identifies image paths in your source files, decorates them with underlines, displays gutter icons next to line numbers, and presents rich hover cards with high-fidelity previews (including full SVG support with theme color adaptation).

✨ Features

• 🔍 Hover Preview: Hovering over an image path pops up a preview card displaying the image, its local path, full CDN URL, and a one-click link to open it in your browser.
• 🖼️ Gutter Icon Thumbnail: Displays an image thumbnail directly in the gutter (next to the line numbers).
• 🎨 Full SVG Support & Theme Color Handling: Seamlessly renders remote SVGs in both hover cards and gutter icons. Automatically replaces currentColor with a configurable color (defaults to #ffffff for optimal contrast on dark backgrounds) and injects missing viewBox attributes for vector scaling.
• 📏 Enlarged Gutter Icons: Configurable gutter icon sizing (defaults to cover) to enlarge and fill the line-height space without being shrunk by margins.
• 🏷️ Configurable Path Prefix: Supports matching paths with custom prefixes (defaults to /, e.g. /, /static/, or @/).
• 🔗 Link Underlines: Subtle underlines highlight supported remote image paths in your code for effortless recognition.
• ⚡ Smart Caching & Request Merging: In-memory caching keyed by image path and color prevents duplicate network requests and delivers instant response times.
• ⌨️ Quick Commands: Quickly update your CDN prefix through the VS Code Command Palette.

⚙️ Configuration Settings

Configure these settings in your VS Code settings.json or in the Settings UI under Remote Image Preview.

Configuration Example (settings.json)

{
  "remoteImagePreview.cdnPrefix": "https://cdn.example.com",
  "remoteImagePreview.pathPrefix": "/",
  "remoteImagePreview.underline": true,
  "remoteImagePreview.gutterIconSize": "cover",
  "remoteImagePreview.svgCurrentColor": "#ffffff"
}

🚀 Usage

1. Configure Your CDN Prefix

Open the Command Palette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS):

1. Type and run Remote Image Preview: Configure CDN Prefix.
2. Enter your CDN base URL (e.g. https://cdn.example.com).
3. Press Enter. The setting will be saved to your user settings.

Alternatively, add remoteImagePreview.cdnPrefix directly into your workspace or user settings.json.

2. Supported Path Formats in Code

The extension scans open source files for paths matching your configured pathPrefix and ending with supported image extensions:

// Quoted strings in JavaScript / TypeScript / JSON
const heroImage = "/static/images/hero.png";
const monoIcon = "/icons/mono/account.svg";

// HTML / JSX attributes
<img src="https://github.com/lsert/remote-image-preview-vscode-plugin/raw/HEAD/assets/banners/summer-sale.jpg" alt="Summer Sale" />

// CSS url() functions
.background {
  background-image: url(/static-lib/img/pattern.webp);
}

• In the editor: Paths are underlined (if enabled).
• In the gutter: An icon appears on the left margin for quick visual reference.
• On hover: Hovering your cursor over the path displays the image card.

3. Supported Image Formats

• .png
• .jpg / .jpeg
• .svg
• .gif
• .webp
• .ico
• .bmp
• .avif

🛠️ Commands

🧪 Development & Testing

1. Install dependencies:

   npm install
   

2. Compile TypeScript:

   npm run compile
   

3. Run unit tests:

   npm test
   

4. Launch Extension in Debug Mode:

   • Open the repository in VS Code.
   • Press F5 to start the Extension Development Host.
   • Test previewing images in the newly opened VS Code window.

5. Package into .vsix:

   npm run package
   

   The generated .vsix file can be installed via VS Code's "Install from VSIX..." command.

📄 License

MIT License.