Vue进阶（贰零肆）：vant van-image无法读取本地图片

一、前言

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

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

  

 

  
1
  
2
  
3
  
4
  
5
 

当要引用本地的图片时，直接写图片的路径在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>

  

 

  
1
  
2
  
3
  
4
  
5
 

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:[]
    }
  },

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

三、解决方式二

或者

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

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

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



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

四、拓展阅读

• 《Vue系列》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/121608535