vant van-image无法读取本地图片问题分析及解决

一、前言

vant中的van-image组件的src参数默认为图片的网络链接：

<van-image
  width="100"
  height="100"
  src="https://img.yzcdn.cn/vant/cat.jpeg"
/>

当要引用本地的图片时，直接写图片的路径在vue项目中会刷不出图片（但用 <img> 标签可以显示 ）。

二、解决方式一

<van-swipe :autoplay="3000" >
   <van-swipe-item v-for="(image, index) in imageList" :key="index">
     <img :src="image" style="width:100%;height:150px;" />
   </van-swipe-item>
 </van-swipe>

data () {
    return {
      isShow:false,
      pingan:"",
      times:"",
      content:{title: '填报须知',content: '欢迎ssss'},
      imageList: [
        require('../../../static/images/1.png'),
        require('../../../static/images/2.png'),
        require('../../../static/images/3.jpg'),
      ],
    active:1,
    notificationList:[]
    }
  },

三、解决方式二

或者

在 .vue 文件中通过相对路径引用本地图片时，需要在图片的链接外包上一层 require()，将图片 URL 转换为 webpack 模块请求，并结合 file-loader 或者 url-loader 进行处理。

<!-- 错误写法 -->
<van-image src="./image.png" />

<!-- 正确写法 -->
<van-image :src="require('./image.png')" />

四、拓展阅读

• 《Vue系列》