vant中图片查看页预览功能ImagePreview

参考链接:https://www.jb51.net/article/265475.htm
 <!-- 现场照片 -->
        <van-field required name="livePhoto" label="现场照片：">
          <template #input>
            <div class="liveSty">
              <img v-for="(item,index) in livePhotoList" :src="item" :key="item" @click="getImg(livePhotoList, index)" />
            </div>
          </template>
        </van-field>

这边img标签要写在template里面，这样就可以水平展示

   // 现场照片处理--created生命周期调用接口返回图片id
      this.livePhotoList = res.data.livePhoto.split(',').map(item => {
        return `${window.webConfig.api}/oss-api-service/attachment/download/${item}/`
      })

  getImg(images, index) {
      ImagePreview({
        images: this.livePhotoList,
        startPosition: index
      })
    },