Vant 图片展示：从数据库获取图片地址并放大查看

<template>
  <div>
    <van-image
      v-for='(image, index) in images'
      :key='index'
      :src='image.url'
      :fit='fitMode'
      :lazy-load='lazyLoad'
      @click.native='showImage(index)'
      style='margin-bottom: 10px;'
    />
    <van-image-preview :images='previewImages' v-model='showPreview' @change='onChange' />
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [], // 从数据库中获取的图片保存地址列表
      fitMode: 'cover', // 图片填充模式
      lazyLoad: true, // 是否开启图片懒加载
      showPreview: false, // 是否显示图片预览
      currentIndex: 0, // 当前预览图片的索引
    };
  },
  computed: {
    previewImages() {
      // 将图片保存地址列表转换为预览图片对象列表
      return this.images.map((image) => ({
        src: image.url,
        fit: this.fitMode,
      }));
    },
  },
  methods: {
    showImage(index) {
      this.currentIndex = index;
      this.showPreview = true;
    },
    onChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>
<p>上述代码中，使用了 Vant 的 <code>van-image</code> 组件展示图片，通过 <code>v-for</code> 循环遍历数据库中的图片保存地址列表，并将每个图片地址绑定到 <code>src</code> 属性上。当用户点击图片时，会调用 <code>showImage</code> 方法显示图片预览，并将当前点击的图片索引赋值给 <code>currentIndex</code>。<code>van-image-preview</code> 组件用于展示图片预览，通过 <code>v-model</code> 绑定 <code>showPreview</code> 来控制显示与隐藏，<code>@change</code> 事件监听用户切换预览图片的操作，并将切换后的图片索引赋值给 <code>currentIndex</code>。在 <code>computed</code> 计算属性中，将图片保存地址列表转换为预览图片对象列表，其中每个预览图片对象包含了图片地址和填充模式。</p>