vant代码实现从数据库里图片保存地址来展示图片并且图片可以点击放大查看

下面是一个简单的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>

上述代码中，使用了Vant的van-image组件展示图片，通过v-for循环遍历数据库中的图片保存地址列表，并将每个图片地址绑定到src属性上。当用户点击图片时，会调用showImage方法显示图片预览，并将当前点击的图片索引赋值给currentIndex。van-image-preview组件用于展示图片预览，通过v-model绑定showPreview来控制显示与隐藏，@change事件监听用户切换预览图片的操作，并将切换后的图片索引赋值给currentIndex。在computed计算属性中，将图片保存地址列表转换为预览图片对象列表，其中每个预览图片对象包含了图片地址和填充模式