mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
47 lines
1.5 KiB
Markdown
47 lines
1.5 KiB
Markdown
---
|
|
title: Image Preview
|
|
icon: ri:image-line
|
|
createTime: 2025/10/08 20:46:17
|
|
permalink: /en/guide/features/image-preview/
|
|
---
|
|
|
|
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](https://ecosystem.vuejs.press/en/plugins/features/photo-swipe.html) plugin.
|
|
|
|
## Configuration
|
|
|
|
Image preview is enabled by default. The behavior can be modified through the following configuration:
|
|
|
|
```ts title=".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](https://ecosystem.vuejs.press/en/plugins/features/photo-swipe.html).
|
|
|
|
## Ignoring Image Preview
|
|
|
|
Image preview can be disabled by using the `no-view` or `ignore` class names, or the `no-view` attribute.
|
|
|
|
```md
|
|
{.no-view}
|
|
{.ignore}
|
|
{no-view}
|
|
|
|
<img src="path/to/image" class="no-view" alt="alt text">
|
|
<img src="path/to/image" class="ignore" alt="alt text">
|
|
<img src="path/to/image" no-view alt="alt text">
|
|
```
|