Vue 查看缩略图：使用 Vue 图片库轻松实现

要查看 Vue 中的缩略图，您可以使用 Vue 图片库或使用第三方库来创建缩略图。下面是使用 Vue 图片库的示例。

首先，您需要安装 Vue 图片库。您可以使用以下命令来安装：

npm install vue-images

然后，在您的 Vue 组件中，您可以使用以下代码来显示缩略图：

<template>
  <div>
    <img v-for="image in images" :src="image.thumbnail" @click="showThumbnail(image)" />
  </div>
</template>

<script>
import VueImages from 'vue-images';

export default {
  data() {
    return {
      images: [
        {
          thumbnail: 'path-to-thumbnail-image1.jpg',
          fullsize: 'path-to-fullsize-image1.jpg'
        },
        {
          thumbnail: 'path-to-thumbnail-image2.jpg',
          fullsize: 'path-to-fullsize-image2.jpg'
        },
        // Add more images here
      ]
    };
  },
  methods: {
    showThumbnail(image) {
      VueImages.open({
        images: this.images,
        start: this.images.indexOf(image)
      });
    }
  }
};
</script>

上述代码会在页面中显示所有缩略图，并在点击缩略图时打开一个模态框来显示全尺寸图像。

请确保将 'path-to-thumbnail-image1.jpg' 和 'path-to-fullsize-image1.jpg' 替换为您实际的图像路径。

希望这可以帮助到您！