uni-app浏览器、iPhone手机显示轮播图,微信、支付宝小程序中不显示的错误原因及解决办法
源码:index.vue:<template><view class="main"><swiper :indicator-dots="true" :autoplay="true" class="carousel"><swiper-item><img src="static/carousel/banner1.jpg" alt="" class="
·
源码:
index.vue:
<template>
<view class="main">
<swiper :indicator-dots="true" :autoplay="true" class="carousel">
<swiper-item>
<img src="static/carousel/banner1.jpg" alt="" class="carousel">
</swiper-item>
<swiper-item>
<img src="static/carousel/banner2.jpg" alt="" class="carousel">
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
@import url("index.css");
</style>
index.css:
.main {
width: 100%;
height: 100%;
background-color: #f7f7f7;
position: absolute;
}
.carousel {
width: 100%;
height: 450rpx; /* 数值同图片高度数值 */
}
编译完成,浏览器中预览效果:
微信小程序开发工具则报错:
并且在微信小程序和支付宝小程序开发者工具中都无法显示图片:
错误原因及解决:
1. 修改图片路径“static/carousel/*jpg”为“../../static/carousel/*jpg”;修改完成后,浏览器、微信小程序、支付宝小程序可以正常显示图片,但是iPhone手机无法显示图片;
2. 接着将img标签修改为uni-app的image标签,所有平台均可正常显示图片。
更多推荐
已为社区贡献12条内容
所有评论(0)