Image Preview On Hover

Overview

Image Preview On Hover is a Visual Studio Code extension that allows you to preview images instantly when hovering over image URLs, imports, or JSX src variables. It supports both local assets and remote image links.

Features

• Hover over HTTP/HTTPS image URLs: Instantly preview remote images.
• Hover over import statements: Preview images imported as local assets.

  import logo from "../../assets/logo.png"; // Hover over the path
  

• Hover over JSX src attributes: Preview images referenced by variables.

  <img src={shopifyLogo} /> // Hover over the variable or the `src` attribute
  

Configuration

This extension provides the following configuration option:

• imageHoverPreview.previewSize: Maximum width/height (in pixels) of the image preview in the hover tooltip. Default is 200.

Installation

1. Open the Extensions view in VS Code (Ctrl+Shift+X or Cmd+Shift+X on macOS).
2. Search for Image Preview On Hover.
3. Click Install.

Usage

1. Open a file containing image URLs, import statements, or JSX code.
2. Hover over the relevant code to see the image preview.

Requirements

• Visual Studio Code version ^1.70.0 or higher.

Contributing

Contributions are welcome! If you encounter any issues or have feature requests, please open an issue on the GitHub repository.

License

This extension is licensed under the MIT License.