源码:

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标签,所有平台均可正常显示图片。

 

 

Logo

前往低代码交流专区

更多推荐