Thumbs are loaded as full size images

[Head]

Hi,

would be awesome if you can add a thumbs property so that I can define thumbnails instead of full images.

[normansander]

Hi,

would be awesome if you can add a thumbs property so that I can define thumbnails instead of full images.

Hi @Head , I think you're absolutely right and I also had something in mind. Thanks for the hint. At the moment I'm busy with other projects but will come back to this problem asap.

[jijojames18]

@headione
Thanks for this wonderful library.

From my understanding, the library already has most of the support required for implementing this.
Prop images accepts an array of strings as well as an array of objects and will use the value of url for displaying the image and thumbnails. I suggest a new property thumb inside each image object. The full image will be shown based on url property and if thumb property is present, it will be used for thumbnails else the url property will be used. Please let me know if you are thinking of a better approach and I would be open to raising a PR for this issue.

[IgorKlajo]

Hi,

would be awesome if you can add a thumbs property so that I can define thumbnails instead of full images.

For HTML you can use something like this

<img class="image" v-for="(thumb, i) in thumbs" :src="thumb" :key="i" @click="index = i">

and in data you add

thumbs: [ 'path to thumbnail1, 'path to thumbnail2, ],

In case you want to add alt text to your thumbnails, but for some reason you don't see the thumbnail ( get an [object Object] for src instead of the image path, you'll need to change the HTML code a little bit.

<img class="image" v-for="(thumb, i) in thumbs" :src="thumb.url" :key="i" @click="index = i" :alt="thumb.alt" >

and in data would be

thumbs: [ { url: 'path to thumbnail1', alt:'My alt text' }, { url: 'path to thumbnail2', alt:'My alt text' }, ],