vant中查看页的图片点击放大使用

1.接口回来的图片数据是id

image.png

  mounted() {
    // 调用查看接口
    apiRoundLogAppList({
      planId: this.id,
    }).then((res) => {
      // 更新时候需要传的iD
      this.updateId = res.data[0].id;
      this.editForm = res.data[0]; //取第一条数据
      //   照片回显
      if (res.data[0] && res.data[0].picture != "") {
        let arr = [];
        arr = res.data[0].picture.split(",");
        this.previewArray = arr.map((item) => {
          return FILE_OPEN_URL() + item;
        });
        console.log("图片回显", this.previewArray);
      }
    });
  },

打印this.previewArray的数据

image.png

2.template的写法

<div class="task-item">
           <span>照片:</span>
           <div>
             <img @click="openImg()" class="img-syle" :src="item" alt="" v-for="(item,index) in previewArray" :key="index" />
           </div>
         </div>

3.methods的写法

   //放大图片
    openImg() {
      ImagePreview({
        images:this.previewArray,
         closeable: true    
      });
    },