中文文档
基于 https://github.com/coderwang/image-preview 修改而来，感谢作者的无私奉献！使用 claude 进行辅助开发。适配服务端查看远程图片功能
Image Preview
This is a powerful VSCode extension that allows you to preview all images in the folder, including avif, ico, jpg, jpeg, png, gif, webp, svg.
Recent Updates
- Thumbnail Generation: Automatically generates 2x resolution thumbnails for images larger than 250x250px using Sharp library
- Smart Caching: Date-based cache management with automatic cleanup of old caches
- Persistent Settings: Image size preference is saved to daily cache and restored on next launch
- Fallback Support: Pure JavaScript compression fallback (pngjs, jpeg-js) when Sharp is unavailable
- Performance Optimization: 1-second debounce on image size changes to prevent excessive refreshing
- Security Enhancement: Added Content Security Policy (CSP) to webview
- Better Hover Display: Shows original image dimensions and size, not thumbnail metadata
Technical Details
- Thumbnails are stored in
globalStorage/thumbnails/YYYY-MM-DD/
- Image size setting persists in
config.json within daily cache directory
- Automatic cache cleanup runs on extension activation (keeps only today's cache)
- Original image URL separated from thumbnail URL for accurate metadata display
Features
- Recursive preview of all images in the folder.
- Display the height, width, and original size of the image when hovering.
- Support adjusting the image size and background color.
- Support filtering by image type.
- Support searching by image name.
- Allow opening the folder using the system file manager.
- Click on the image to preview it in a large window.
- Right click on the image to open the operation menu, which includes revealing in the sidebar, revealing in the file folder, copying image name, copying base64, copying complete path, compressing the image, and deleting the image.
- Support setting theme (light / dark).
- Support setting language (en / zh).
Usage
Find the folder you want to preview, and right-click to select Image Preview.
If you want to preview the whole project, you can use the command palette to open the image preview.
Configuration
Use superImagePreview.excludeDirectoryNames to exclude the directory name from the recursive preview (it is ["node_modules", "dist"] by default):
{
"superImagePreview.excludeDirectoryNames": ["node_modules", "dist"]
}
Use superImagePreview.theme to set the theme for image preview (it is light by default):
{
"superImagePreview.theme": "dark"
}
Use superImagePreview.language to set the language for image preview (it is en by default):
{
"superImagePreview.language": "zh"
}
If you have any questions or suggestions, please feel free to contact me.
Development
Build and Package
Install dependencies
npm install
Build the extension
npm run build # Build webview (React app)
npm run compile # Build extension
Package the extension
vsce package
This will create image-preview-x.x.x.vsix file.
Install the packaged extension
- Open VS Code
- Go to Extensions view (Ctrl+Shift+X)
- Click "..." menu → "Install from VSIX..."
- Select the
.vsix file
Watch Mode (Development)
npm run watch-all # Watch both extension and webview
