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

举报
SHQ5785 发表于 2023/03/14 09:09:14 2023/03/14
【摘要】 一、前言vant中的van-image组件的src参数默认为图片的网络链接:<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg"/>当要引用本地的图片时,直接写图片的路径在vue项目中会刷不出图片(但用 <img> 标签可以显示 )。 二、解决方式一<van-swipe :autopl...

一、前言

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')" />


四、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。