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