Multiple Image Preview
Related Configuration Options
| Property Name | Description | Type | Default Value |
|---|---|---|---|
| imgList | Array of images for preview | array | - |
| nowImgIndex | Index of the currently displayed image | number | 0 |
| thumbnail | Enable bottom thumbnails | boolean | true |
| thumbnailsList | Thumbnail list | array | imgList |
imgList
You don't need separate configuration options for single and multiple image previews. Whether it's a single image or multiple images, we use the imgList parameter to receive image URLs. We will automatically determine the mode based on the number of image URLs you provide.
Additionally, we offer multiple ways to pass parameters, making it convenient for you to preview a single image. You can directly pass a single image URL, an array of image URLs, or configuration options. The following usage methods produce the same effect:
this.$hevueImgPreview('/1.png')
this.$hevueImgPreview(['/1.png'])
this.$hevueImgPreview({
imgList: ['/1.png']
})nowImgIndex
When you pass multiple image URLs, we need to know which image you want to start the preview from. You can specify this using the nowImgIndex configuration option. Note that the index starts from 0.
thumbnail
The thumbnail configuration option controls whether thumbnails are enabled. Note that it only takes effect during multiple image previews. If you pass only one image URL, thumbnails will not be enabled even if thumbnail is set to true.
Additionally, as mentioned earlier, enabling thumbnails will load all images at once. If thumbnails are disabled, images will be loaded one by one as they are switched to. Please decide whether to enable thumbnails based on the number and size of images you need to browse at once.
thumbnailsList
When previewing a large number of images or high-resolution images, loading all thumbnails at once may affect performance. If you have prepared compressed versions of the images, you can pass them through the thumbnailsList parameter to improve loading speed and enhance the experience. If this parameter is not provided, the component will use the images from imgList as thumbnails by default.