vue+vant 图片预览

单张图片预览

<div v-for="(item, d) in data" :key="d" class="picture_content">

<img :src="picUrl + i" alt=""  @click="showPic(item, d)" />

</div>

import { ImagePreview } from "vant";

 getImg(item, index){

      ImagePreview(

        [ 'http://applet-second.oss-cn-qingdao.aliyuncs.com/'+item ]);

    }

多张图片预览

<div v-for="(i, d) in data" :key="d" class="picture_content">

<img :src="picUrl + i" alt=""  @click="showPic(data, d)" />

</div>

showPic(images, d) {

      let arr = images.map(r => {

        return this.picUrl + r

      })

      ImagePreview({

        images: arr, //需要预览的图片 URL 数组

        showIndex: true, //是否显示页码

        loop: false, //是否开启循环播放

        startPosition: d //图片预览起始位置索引

      })

    },