Image Preview

About 182 wordsLess than 1 minute

2025-10-08

In the theme, images support click-to-enlarge preview by default. A preview list is generated by scanning images within the document content.

This feature is powered by the @vuepress/plugin-photo-swipe plugin.

Configuration

Image preview is enabled by default. The behavior can be modified through the following configuration:

.vuepress/config.ts
export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      photoSwipe: {
        // Image selector
        selector: '.vp-doc :not(a) > img:not([no-view],.no-view,.ignore)',
        download: true, // Whether to show the download button
        fullscreen: true, // Whether to show the fullscreen button
        scrollToClose: true, // Whether to close the current image when scrolling
      }
    }
  })
})

For more configuration options, please refer to @vuepress/plugin-photo-swipe.

Ignoring Image Preview

Image preview can be disabled by using the no-view or ignore class names, or the no-view attribute.

![](path/to/image){.no-view}
![](path/to/image){.ignore}
![](path/to/image){no-view}

<img src="path/to/image" class="no-view">
<img src="path/to/image" class="ignore">
<img src="path/to/image" no-view>