這里的大圖和縮略圖不是相同的圖片，只是模擬下圖片是可以替換的
我的版本是 v-viewer": "^1.6.4",

<template>
  <div style="padding:50px;">
    <viewer :options="options" :images="imageList" class="viewer" ref="viewer">
      <div class="content">
        <div v-for="(item,index) in imageList" :key="index">
          <img :alt="item.originalName" :original="item.original" :src="item.thumbnail"  width="350" height="350" class="imgClass">
          <h3>{{item.title}}</h3>
        </div>
      </div>
    </viewer>
  </div>
</template>

<script>
export default {
  name: "index2",
  data() {
    return {
      options:{
        url: 'original',  // 定義大圖片地址的字段名
      }, // 配置項(xiàng)，看官網(wǎng)
      imageList: [
        { title:'金莎', thumbnail: require('@/assets/swiper/10.jpg'), original: 'https://file.iviewui.com/images/image-demo-2.jpg',originalName:'大圖名字金沙'},
        { title:'泰勒', thumbnail: require('@/assets/swiper/6.jpg'), original: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', originalName:'大圖名字泰勒' },
        { title:'梅西', thumbnail: require('@/assets/swiper/7.jpg'), original: require('@/assets/swiper/10.jpg') ,originalName:'大圖名字梅西' },
        { title:'壁紙', thumbnail: require('../../../static/images/壁紙.jpg'), original: require('../../../static/images/鐘晨瑤.png') ,originalName:'大圖名字種晨瑤' },
        { title:'圖五', thumbnail: require('@/assets/swiper/8.jpg'), original: require('../../../static/images/鞠婧祎.jpg') ,originalName:'大圖名字鞠婧祎'},
        { title:'圖六', thumbnail: require('@/assets/swiper/5.jpg'), original: require('../../../static/images/美女.jpg') ,originalName:'大圖名字美女' },
      ],
    }
  },
  mounted() {

  },
  methods: {},

}
</script>

<style scoped>
.content {
  display: flex;
  flex-wrap: wrap;
}
.imgClass {
  margin-right:20px;
  cursor: pointer;
}
.imgClass:active {
  transform: scale(0.99);
}
</style>
}
https://blog.csdn.net/weixin_45774919/article/details/120951494
https://blog.51cto.com/u_12881709/5957853

GIF 2024-7-9 23-56-28.gif

大圖的名字是綁定在img標(biāo)簽的alt屬性的，想要預(yù)覽圖和縮略圖不一樣，就要準(zhǔn)備兩個(gè)地址，縮略圖正常綁定在src屬性上，大圖綁定在original屬性上，并且在options中定義url的值是original(綁定的屬性就是url的屬性值)，如：url: 'original'