Shows the images in a folder as a thumbnail gallery in an editor tab.
Usage
Right-click a folder in the Explorer and choose Show Image Thumbnails.
Right-click an image file in the Explorer and choose Browse Images in Folder. The gallery opens for the image's folder and scrolls to that image.
Or run Image Thumbnails: Show Image Thumbnails from the Command Palette and pick a folder.
In the gallery:
Click a thumbnail to open the image in VS Code's image preview.
Press Space, or right-click a thumbnail and choose Preview Image, to view it full size inside the gallery. Use the arrow keys (or Home/End) to step through the images in their current filter and sort order, Enter to open the image in the editor, Delete to delete it, and Esc or Space to return to the grid.
Move between thumbnails with the arrow keys (Up/Down move a row), PageUp/PageDown, and Home/End; hold Shift to extend the selection. Enter opens the focused image.
Select several images with Ctrl+click (Cmd+click on macOS), Shift+click for a range, or Ctrl+A for all shown. Esc or clicking empty space clears the selection.
Right-click a thumbnail and choose Copy Relative Path or Copy as Markdown Image to copy the selected images, one per line. Markdown links are relative to the Markdown file open next to the gallery; if none (or more than one) is open, they start with / from the workspace folder, which VS Code's Markdown preview and GitHub both resolve. You can also drag thumbnails out of the gallery.
Right-click a thumbnail and choose Delete Selected Images, or press Delete. You are asked to confirm, and files go to the Recycle Bin / Trash unless files.enableTrash is off.
Filter by file name, sort by name or modified date, and resize the thumbnails with the slider.
Tick Include subfolders to also show images in nested folders (node_modules and .git are skipped).
The gallery refreshes automatically when images are added, changed, or deleted.
Settings
Setting
Default
Description
imageThumbnails.thumbnailSize
160
Initial thumbnail size in pixels
imageThumbnails.extensions
png, jpg, jpeg, gif, webp, bmp, svg, ico, avif
File extensions treated as images
imageThumbnails.maxImages
2000
Maximum number of images shown in one gallery
Development
npm install
npm run compile
Press F5 in VS Code to launch an Extension Development Host.
To build an installable package:
npm run package
code --install-extension image-thumbnails-0.0.1.vsix
