如果把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="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