Vue+Vant ui实现图片预览 ---------------升级版

• 前言 =====
  1.
   当我在使用vant的图片预览的时候  :src里面的不是item，而是item.path
   这时他会报错，说src里面的是对象不是字符串，
   所以我们要用第二种方法 解决：item.path会报错的问题
  2.
  注意当我们要使用多个图片预览的时候 下标值一定不要重复，否则预览的图片会相同
  
  @click="sceneImg(lastDetails.children[0].filesinfo, idx)"
  @click="sceneImg(lastDetails.children[idx + 1].filesinfo, ttt)"

• 1、在所需要使用的组件里面引用

import { ImagePreview } from 'vant';

• （第一种方法 :src="item"）
• 2、具体使用详解

// 通过函数传参的方式把图片数组和位置索引放入到 ImagePreview 配置对象里面
<div v-for="(item,index) in device.imgs" :key="index">
    <img :src="item" @click="sceneImg(device.imgs,index)"/>
</div>

3.js

<script>
import { ImagePreview } from "vant"; // 引入Vant图片预览组件
export default {
data() {
    return {
    };
  },
methods:{
    // 图片预览
    sceneImg(images,index) {
      ImagePreview({
        images:images, //需要预览的图片 URL 数组
        showIndex:true, //是否显示页码
        loop:false, //是否开启循环播放
        startPosition:index //图片预览起始位置索引
      })
    },
  }
}
</script>

============

接下来看第二种(:src="item.path")

                  <div
                  v-for="(itm, idx) in lastDetails.children[0].filesinfo"
                  :key="idx"
                  >
                    <img
                      src="../../assets/image/upimg.png"
                      @click="sceneImg(lastDetails.children[0].filesinfo, idx)"
                    />
                    <img
                      v-else
                      src="../../assets/image/upload.png"
                      @click="click_file(itm.path)"
                      alt=""
                    />
                </div>


    // 转办图片预览
    sceneImg(images, index) {
      ImagePreview({
        images: images.map((v) => v.path), //需要预览的图片 URL 数组
        showIndex: true, //是否显示页码
        loop: false, //是否开启循环播放
        startPosition: index, //图片预览起始位置索引
      });
    },