你可以使用Vant组件库中的Image组件来展示图片,并结合Dialog组件来实现点击放大查看功能。下面是一个简单的Vant代码实现示例:

<template>
  <div>
    <van-image v-for="image in images" :key="image.id" :src="image.url" @click="showDialog(image.url)" />
    <van-dialog v-model="dialogVisible" :width="dialogWidth">
      <img :src="dialogImageUrl" style="width: 100%" />
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, url: "图片1的地址" },
        { id: 2, url: "图片2的地址" },
        { id: 3, url: "图片3的地址" }
      ],
      dialogVisible: false,
      dialogImageUrl: "",
      dialogWidth: "80vw"
    };
  },
  methods: {
    showDialog(url) {
      this.dialogVisible = true;
      this.dialogImageUrl = url;
    }
  }
};
</script>

上述代码中,images数组存放了图片的信息,包括id和url。通过v-for指令遍历数组,使用van-image组件来展示每个图片,并绑定click事件来调用showDialog方法。

showDialog方法会设置dialogVisibletrue,显示对话框,并将dialogImageUrl设置为点击的图片的url,以便在对话框中显示。对话框的宽度可以通过dialogWidth属性进行调整。

在对话框中,使用img标签来展示图片,宽度设置为100%以适应对话框大小。

以上代码是一个简单的实现示例,你可以根据实际需求进行适当的修改和扩展

vant代码实现通过存放在数据库图片地址来展示图片图片可以点击放大查看

原文地址: https://www.cveoy.top/t/topic/hBFy 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录