Vue2.0+Vant图片预览（ImagePreview）无法显示照片

1.安装

通过 npm  安装vant2 的版本命令：cnpm i vant@latest-v2 -Snpm i vant@latest-v2 -S

2.应用代码

在全局（App.vue）中需要引入和注册全局组件：如下代码

import Vue from 'vue';

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

template:
        <!-- 剧照swiper组件 -->
      <detail-swiper :perview="2" name="photos">
        <detail-swiper-item v-for="(data,index) in detailObj.photos" :key="index">
          <div class="avatar" :style="{backgroundImage:'url('+data+')'}"                         
           @click="handlePreview(detailObj.photos,index)"></div>
        </detail-swiper-item>
      </detail-swiper>

<script>
//引入vue
import Vue from 'vue'
// 函数调用法
import { ImagePreview } from 'vant';
export default{
    return{
      detailObj:null,
    }
    methods:{
         handlePreview(photos,index){
            ImagePreview({
              images: photos, //照片数组
              startPosition: index, //照片开始位置
              closeable: true, // 关闭按钮
              closeIconPosition:'top-left'   //关闭按钮的位置
      });
    }

    }
    created(){
    // axios 通过id 可以请求后台数据
    http().then(res=>{
        this.detailObj = res.data.data.film
      })
  }
}
}
</script>

3.图片无法正常显示，其余功能正常；报错如下信息；

 

 4.原因分析

原因：vant安装版本问题；现在默认安装的是peerDependencies。

 

5.解决方案

通过下面命令重新安装vant(2)，

npm i vant@latest-v2 --legacy-peer-deps；

重新安装后package.json中vant版本配置会变化如下

 6.重启服务器，重新刷新页面，问题解决