Image Preview
About 1 min
By using @vuepress/plugin-photo-swipe, clicking images in pages will enter preview mode.
Disable Feature
If you don't need this feature, you can set plugins.photoSwipe: false
in theme options to disable it:
import { hopeTheme } from "vuepress-theme-hope";
export default hopeTheme({
plugins: {
photoSwipe: false,
},
});
If you want to disable it in specific pages, you can set photoSwipe: false
in the page's frontmatter.
---
photoSwipe: false
---
If you want to exclude specific images, you can add the no-view
attribute to the image:
<img src="https://vuejs.org/images/logo.png" no-view />
Browse Mode
In preview mode, you can:
- Swipe left and right to preview other pictures on the page in order
- View the description of the picture
- Zoom in and zoom out the picture
- View pictures in full screen
- Download pictures
- Share pictures
Tips
- Besides clicking "×" in the upper right corner to exit the preview mode, scrolling up and down more than a certain distance will also exit preview mode
- On mobile devices, or using the PC trackpad, you can use pan and zoom gestures to pan and zoom in the preview mode
Customize Config
vuepress-theme-hope
passes plugins.photoSwipe
in theme options as plugin options to @vuepress/plugin-photo-swipe
.
You can check the photo-swipe plugin documentation for advanced configuration.
Demo



Changelog
4/14/25, 6:20 AM
View All Changelog
253d1
-onbdfcb
-on4a38e
-onfb6da
-on2a306
-on8174c
-onc8d60
-on7596d
-onad023
-onfd395
-one4f78
-on60053
-on62d19
-onf6ff0
-on3c199
-on