vant库 van-image标签无法引用本地图片

如果把van-swipe-item写成for循环，内部的van-image标签无法使用本地图片，解决办法：
1.把van-image标签换成img，去掉for循环的使用

<van-swipe :loop="false" @change="onChange"><van-swipe-item><img src="../../assets/bggold.png" alt /><div class="goldcard cardbox" v-if="!(cardLevel==8)"><div class="cardtit"><img src="../../assets/gold1.png" alt /><p>金会员</p></div><p class="cardstaus">未开通</p><p class="cardadv">¥100购卡礼 X 专属特权</p><p class="cardredu">首单立减¥30</p></div><div class="goldcard cardbox vipcard" v-if="cardLevel==8"><img class="userhead" :src="customInfo.avatarUrl||defaultIcon" alt /><div class="userInfo"><p class="username">{{customInfo.truename||defaultName}}</p><p class="usertype"><img src="../../assets/gold1.png" alt /> 金会员</p><div class="deadline">{{endtime}}到期</div></div><!-- <div class="record flexall">购卡记录</div> --><div class="cardNo">{{customInfo.cardNo}}</div></div></van-swipe-item><van-swipe-item><img src="../../assets/bgsilver.png" alt /><div class="silvercard cardbox" v-if="!(cardLevel==5)"><div class="cardtit"><img src="../../assets/nogold.png" alt /><p>银会员</p></div><p class="cardstaus">未开通</p><p class="cardadv">¥50购卡礼 X 专属特权</p><p class="cardredu">首单立减¥30</p></div><div class="goldcard cardbox vipcard" v-if="cardLevel==5"><img class="userhead" :src="customInfo.avatarUrl||defaultIcon" alt /><div class="userInfo"><p class="username">{{customInfo.truename||defaultName}}</p><p class="usertype"><img src="../../assets/gold1.png" alt /> 银会员</p><div class="deadline">{{endtime}}到期</div></div><!-- <div class="record flexall">购卡记录</div> --><div class="cardNo">{{customInfo.cardNo}}</div></div></van-swipe-item><van-swipe-item><img src="../../assets/bgnormal.png" alt /><div class="commoncard cardbox" v-if="!(cardLevel==1)"><div class="cardtit"><img src="../../assets/nogold.png" alt /><p>普通会员</p></div><p class="cardstaus">长期有效</p></div><div class="commoncard cardbox vipcard" v-if="cardLevel==1"><img class="userhead" :src="customInfo.avatarUrl||defaultIcon" alt /><div class="userInfo"><p class="username">{{customInfo.truename||defaultName}}</p><p class="usertype"><img src="../../assets/nogold.png" alt /> 普通会员</p><div class="deadline">长期有效</div></div><div class="cardNo">{{customInfo.cardNo}}</div></div></van-swipe-item></van-swipe>

2.img用src引用图片变量，在图片的链接外包上一层 require（）

<van-swipe :autoplay="3000" ><van-swipe-item v-for="(image, index) in imageList" :key="index"><img :src="data: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:[]}}

参考：https://blog.csdn.net/qq_43542074/article/details/100537554

vant库 van-image标签无法引用本地图片相关推荐

hexo引用本地图片无法显示
最近重新开始用起hexo,但是发现在文章中引用本地图片时总是显示不出来. 问题如下图所示. 花费了许久时间才解决这个问题. 因此将一些解决经验整理出来,希望能帮助到大家. 一.插件安装与配置首先我们 ...
有道云笔记Markdown中引用本地图片
用过有道云笔记的同志都知道,用markdown写文章时引用本地图片要会员(csdn多好,免费给你上传本地图片),这里给大家介绍一种方法可以应用本地图片. Step 1:将本地图片上传到有道云 Step ...
Python 技术篇-用smtplib和email库实现邮件发送并展示本地图片实例演示
qq账号发送邮箱登陆密码需要用授权码. 可以看我的这个文章: Python 技术篇-qq邮箱授权码开通实现原理将本地图片加入到邮件的附件中. m_img.add_header('Content-I ...
html引用本地图片不能是桌面的,Img标签与本地文件：/// URL不显示在Microsoft Edge Web浏览器...
在我的桌面应用程序中,我创建了一个临时HTML文件(旨在让用户打印报告),然后通过默认显示网页浏览器.这个HTML文件保存在一个临时文件夹,例如:C:/Users/UserName/AppData/L ...
WEB前端之html img标签引用本地图片
我觉得语法大家都应该明白怎么写 <img src="img/demo.PNG">很简单但是我在第一次写的时候总是出现图片加载不出来的情况然后发现只要把图片文件夹放 ...
springmvc+jsp引用本地图片文件
1.图片文件路径,注意图片文件夹和WEB-INFO文件夹同级 2.web.xml配置 <servlet-mapping><servlet-name>default</se ...
vue3+ts 引用本地图片路径的解决方案
因为vue3相对vue2来说已经取消了"require"这块,在vue2中不管是页面还是js板块中引用图片途径的话都可以require('@images/xxx.png'),但是经 ...
Futter基础第3篇：实现引用远程图片、本地图片、实现圆形图片，实现圆角图片【Image.network、Image.asset、BorderRadius.circular（150）】
文章目录一丶效果图二丶代码+注释三丶知识点一丶效果图 [1]引用远程图片 [2]引用本地图片 [3]实现圆形图片(方法一).圆角图片(受弧度影响) [4]实现圆形图片(方法二) 二丶 ...
微信小程序不能使用本地图片当背景图片的解决方法
本来直接用的本地图片,但结果真机调试的时候无法显示,上网查了之后知道小程序图片只能加载网络上的(直接写链接),或者是base64转码后的 style="background-image:ur ...

vant库 van-image标签无法引用本地图片

vant库 van-image标签无法引用本地图片相关推荐

最新文章

热门文章