vant van-image无法读取本地图片

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

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

解决方式一:
当要引用本地的图片时,直接写图片的路径在vue项目中会刷不出图片(但用 标签可以显示 )。

12345
<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>
12345678910111213141516
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 进行处理。

12345
<!-- 错误写法 --> <van-image src="./image.png" /> <!-- 正确写法 --> <van-image :src="require('./image.png')" />
# windows,linux
JDK8新特性——stream API 的使用
评论
zhangrenxian123小白菜
文章28
分类5
标签2