Vue.js Image Viewer With v-viewer / Viewer.js

npm install v-viewer

import 'viewerjs/dist/viewer.css'import Viewer from 'v-viewer'Vue.use(Viewer)

<template>  <div v-viewer="viewerOptions">    <img v-for="image in images" :src="image.src" :key="image.src" :data-href="image.href" :alt="image.alt">  </div></template><script>export default {  data() {    return {      viewerOptions: {        movable: false,        rotatable: false,        scalable: false,        url: 'data-href',        title(image, imageData) {          // if want to show blank title, must use alt=" "          return image.alt        },      },      images: [        { src: 'https://picsum.photos/id/1/150/150', href: 'https://picsum.photos/id/1/800/800', alt: ' ' },        { src: 'https://picsum.photos/id/2/150/150', href: 'https://picsum.photos/id/2/800/800', alt: ' ' },        { src: 'https://picsum.photos/id/3/150/150', href: 'https://picsum.photos/id/3/800/800', alt: ' ' },        { src: 'https://picsum.photos/id/4/150/150', href: 'https://picsum.photos/id/4/800/800', alt: ' ' },        { src: 'https://picsum.photos/id/5/150/150', href: 'https://picsum.photos/id/5/800/800', alt: ' ' },        { src: 'https://picsum.photos/id/6/150/150', href: 'https://picsum.photos/id/6/800/800', alt: ' ' }      ]    }  }}</script>