hevue-img-preview
A Vue image preview component compatible with Vue 2 and Vue 3, supporting single/multiple images, thumbnails, and mobile gestures.
What is hevue-img-preview?
hevue-img-preview is a Vue.js component library for implementing interactive image preview modals in web applications. It solves the need for a consistent, feature-rich image viewer that works across Vue 2 and Vue 3 ecosystems, supporting both single and multiple image previews with mobile-optimized gestures.
Vue.js developers building applications that require embedded image galleries, media viewers, or product showcases, especially those needing cross-version compatibility and mobile touch support.
Developers choose hevue-img-preview for its out-of-the-box compatibility with both Vue 2 and Vue 3, reducing migration effort, and its comprehensive feature set—including thumbnails, gestures, and deep customization—without requiring additional dependencies.
Overview
vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，支持vue2和vue3，配备官方文档。A Vue image preview component that supports both PC and mobile, single and multiple image preview, compatible with both Vue 2 and Vue 3, and comes with official documentation.
Use Cases
Best For
- Adding image preview modals to Vue 2 or Vue 3 admin dashboards
- Building mobile-friendly product galleries in Vue e-commerce sites
- Implementing touch-enabled image viewers in Vue mobile web apps
- Creating customizable media previews in Vue content management systems
- Adding thumbnail navigation to Vue photo album components
- Providing accessible image zoom and rotation in Vue documentation sites
Not Ideal For
- Projects using non-Vue frameworks like React or Angular, as it's Vue-specific and won't integrate easily.
- Applications requiring preview of videos, PDFs, or other media types, since it only supports images.
- Teams needing out-of-the-box, high-accessibility components without additional customization work, as accessibility features are not highlighted in the README.
- Large-scale projects where minimal bundle size is critical, as the component includes many features that might increase payload.
Pros & Cons
Pros
Works with both Vue 2 and Vue 3, with separate import paths, reducing migration headaches as shown in the installation instructions.
Supports pinch-to-zoom and swipe navigation, optimized for responsive design across devices, explicitly mentioned in the README for mobile support.
Allows extensive UI tweaks via control bar configuration, custom styles, and themes, with event callbacks for image changes and closes.
Supports separate thumbnail lists to improve performance with large images, as noted in the update log for version 7.1.3.
Cons
Only handles image previews, with no native support for videos or documents, which restricts use in mixed-media applications.
Major updates like version 7.0.0 introduced significant changes, indicating potential instability and need for careful version management.
Primary documentation is in Chinese, with an English version available, but it may lack depth or updates for international developers.
Frequently Asked Questions
Related Projects
tiptapThe headless rich text editor framework for web artisans.
vee-validate✅ Painless Vue forms
form-create:fire::fire::fire: 强大的低代码动态表单组件，通过 JSON 数据驱动表单渲染，适配移动端，支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
vuelidateSimple, lightweight model-based validation for Vue.js
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.