Introduction
hevue-img-preview is a Vue-based image preview component compatible with both Vue 2 and Vue 3. It supports both PC and mobile devices, as well as single and multiple image previews. By simply passing an image URL, you can achieve image preview functionality. On mobile devices, it supports single-finger drag and two-finger zoom. The colors of all components on the page can be customized for personalized design. If this plugin is helpful to you, please consider giving it a star on GitHub or Gitee. If you have any feedback or suggestions, feel free to reply or submit an issue.
Features:
Single Image Preview Multiple Image Preview Thumbnails Keyboard Shortcuts Custom Rotation Image Switch Event Callback Close Event Callback PC Support Mobile Support Save Image Custom Styles
Demo
Single Image Preview
Multiple Image Preview
Excellent Compatibility and Rich Configuration
Thanks to the excellent compatibility of Vue 2 and Vue 3, hevue-img-preview supports both versions. The installation steps remain unchanged; you only need to distinguish between the Vue 2 and Vue 3 versions when importing.
In terms of devices, hevue-img-preview supports both PC and mobile platforms. The plugin adapts to the device to provide the correct styles and interactions.
Performance
Many plugins reload the image URL every time you switch images during multiple image previews. Unlike them, hevue-img-preview only loads each image the first time it is switched to. Subsequent switches do not reload the image, significantly reducing network requests and optimizing user experience by avoiding waiting during image switches.
Note
If thumbnails are enabled, all images will be loaded at the start, and each image will be loaded again when switched to. This means each image will be loaded twice. Please decide whether to enable thumbnails based on the number of images, their size, and the target user's device performance.