Hi everyone! 👋
I’m a developer from China, and this is my first time posting in an international community. My English isn’t very fluent yet, so I used some translation tools to help write this — sorry if anything sounds a bit off. 😅
If you have any suggestions or feedback, feel free to let me know — I’d really appreciate it!
I hope this plugin can be helpful to some of you. 😊
hevue-img-preview is a versatile and customizable image preview plugin for Vue 2 & Vue 3. It supports both desktop and mobile environments, offers single and multiple image preview modes, and provides a seamless user experience with rich interactions and modern design.
Whether you’re building a modern dashboard, a media-heavy site, or a mobile-first application, hevue-img-preview gives you full control over how users interact with your images — out of the box.
🚀 Features at a Glance
- ✅ Single & multiple image preview
- ✅ Mobile gesture support: drag, pinch-to-zoom
- ✅ Mouse & keyboard interaction on desktop
- ✅ Bottom control bar with zoom, rotate, download, help, etc.
- ✅ Thumbnail preview bar (with lazy loading)
- ✅ Keyboard shortcut support with visual help panel
- ✅ Fully customizable styles via CSS variables
- ✅ Multi-language support (currently Chinese & English)
- ✅ Built-in themes (including a “Glass” iOS-style theme)
- ✅ CDN usage supported for non-bundler environments
- ✅ Image caching & performance optimization
- ✅ Download protection & right-click disabling
- ✅ Event hooks: open/close, image change, etc.
🌐 Live Demo & Documentation
- 🔗 Online Docshttps://heyongsheng.github.io/en/
- 🧭 GitHub Repositoryhttps://github.com/heyongsheng/hevue-img-preview/tree/master
- 📦 NPM Pagehttps://www.npmjs.com/package/hevue-img-preview
🔥 Keyboard Shortcuts
Some users prefer using the keyboard for actions like zooming or rotating images. To support this, the plugin includes a rich set of predefined keyboard shortcuts.
To improve usability and discoverability, a “Help” icon will automatically appear in the control panel when keyboard shortcuts are enabled. Clicking it reveals a full list of available shortcut keys, making it easier for users to learn and use them efficiently.
🌐 As a developer based in China with limited resources, the plugin currently supports only Chinese and English. If there is demand from the international community, I plan to add support for more languages in the future.
✨ Inspired by iOS 26’s Liquid Glass (glass-theme)
The liquid glass effect introduced in iOS 17 gave us fresh inspiration for UI design.
Inspired by this sleek and modern style, we created a brand-new optional theme: glass-theme.
While frontend technologies still have their limits — and the effect can’t fully match native system performance — this theme still brings a futuristic, translucent visual experience to the plugin.
To respect different aesthetic preferences, we’ve chosen not to make it the default. If you’d like to try it out, just add this to your config:
themeName: 'glass-theme'
All images in this documentation use the glass-theme.
The GIF quality is limited by file size — for the best effect, check the live demo in the official docs.
🛠️ Customizable Control Bar
We understand that some users prefer a cleaner interface with fewer controls.
That’s why the plugin offers flexible options for customizing the control bar.
You can choose to:
- Show or hide the entire control bar
- Select which buttons to display
- Reorder the control items to fit your needs
This allows you to tailor the UI to your project and user preferences.
🎯 Custom Rotation Control
Most image preview plugins only support fixed 90° step rotations, which can be limiting for users who need more precise angle adjustments.
To solve this, we’ve added a brand-new custom rotation feature in this version — powered by a slider-based UI.
Users can simply drag the rotation slider at the bottom to adjust the image to any angle they need, offering fine-grained control with an intuitive experience.
Compared to traditional button-based rotation, this approach is more flexible and user-friendly — especially useful in scenarios where non-standard angles are needed.
Due to space limitations, this post only highlights some of the key features.
For a full list of features and detailed usage instructions, please check out the official documentation — everything is explained thoroughly there.
Thanks again for reading, and I hope you find this plugin helpful! 😊
If you like it, feel free to leave a ⭐️ or share your feedback — it means a lot!
Top comments (0)