uni-app中swiper的swiper-item使用image加载网络图片无法加载出来

uni-app中swiper的swiper-item使用image加载网络图片无法加载出来

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

Windows 7 旗舰版

HBuilderX类型：

正式

HBuilderX版本号：

3.1.13

手机系统：

Android

手机系统版本号：

Android 6.0

手机厂商：

vivo

手机机型：

y66

页面类型：

vue

打包方式：

离线

项目创建方式：

HBuilderX

示例代码：

<template>
<view class="flex-column">
<text>服务</text>  
 
    <image src="https://ztuo-wy.oss-cn-beijing.aliyuncs.com/20210910/1631265371035brw39nqwnsw.png"  
        @load="onImageLoad" @error="onImageError"></image>  

    <view class="flex-column">  
        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"  
            :duration="duration">  

            <swiper-item class="swiper-item" v-for="item in imageList" :key="item">  
                <image class="swiper-item" :src="item" @load="onImageLoad" @error="onImageError"></image>  
            </swiper-item>  

        </swiper>  
    </view>  

</view>  
</template>  

<script>
export default {  
    data() {  
        return {  
            screeHeight: document.body.clientHeight, // 屏幕高  
            indicatorDots: true,  
            autoplay: true,  
            interval: 2000,  
            duration: 500,  
            imageList: ["https://ztuo-wy.oss-cn-beijing.aliyuncs.com/20210910/1631265371035brw39nqwnsw.png",  
                "https://ztuo-wy.oss-cn-beijing.aliyuncs.com/20210910/1631265557442g6298w0hedu.jpg",  
                "https://ztuo-wy.oss-cn-beijing.aliyuncs.com/20210910/1631265697736s02y6uysgwq.png"  
            ],  

        }  
    },  

    components: {  

    },  
    computed: {  
        measureHeigth() {  
            return (this.screeHeight - 100) + 'px';  
        }  
    },  
    methods: {  
        onImageLoad(e) {  
            console.log("onImageLoad =" + JSON.stringify(e))  
        },  
        onImageError(e) {  
            console.log("onImageError =" + JSON.stringify(e))  
        }  
    }  
}
</script>  

<style lang="scss">
.flex-column {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}

.banner {  
    width: 686rpx;  
    height: 343rpx;  
}  

.swiper {  
    height: 300rpx;  
    width: 600rpx  
}  

.swiper-item {  
    height: 300rpx;  
    width: 600rpx  
}
</style>

操作步骤：

每次都是

预期结果：

加载出图片

实际结果：

没有加载出图片

bug描述：

swiper 里面的swiper-item使用image加载网络图片，在真机环境，Android原生代码启动uniApp，无法加载出来；在HBuilder X 的内嵌Web浏览器可以加载。

附件文件夹中：

  1. uniApp工程代码：swiper-image.zip

更多关于uni-app中swiper的swiper-item使用image加载网络图片无法加载出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

未复现此问题。 请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app中swiper的swiper-item使用image加载网络图片无法加载出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经修改，上传完整实例，在真机环境，Android原生代码启动uniApp，无法加载出来图片

回复 Syson: 运行你的示例，body相关报错内容去除，swiper正常，未复现问题。

回复 DCloud_UNI_Anne: 请问是哪些内容报错？

回复 Syson: document.body.clientHeight，这部分报错。获取系统信息可用uni.getSystemInfo，详见文档

小程序显示正常，打包apk后出现了这个问题，经过加背景色测试，发现是swiper-item未渲染出来，但奇怪的是有些页面同样使用了swiper-item却没出现问题

根据你提供的信息，这是一个典型的uni-app在Android真机环境下网络图片加载问题。问题可能出在以下几个方面：

  1. 网络权限问题：Android原生环境需要配置网络权限，确保在AndroidManifest.xml中添加了网络权限：
<uses-permission android:name="android.permission.INTERNET" />

  1. HTTPS证书问题：你的图片链接使用的是HTTPS协议，Android 6.0及以下版本对HTTPS证书要求较严格。建议：

    • 检查图片链接的SSL证书是否有效
    • 尝试将图片链接改为HTTP协议测试
    • 在manifest.json中配置networkTimeout或检查安全策略

  2. 图片域名白名单：uni-app在App端有域名白名单限制，需要在manifest.json中配置：

"app-plus": {
  "networkTimeout": {
    "request": 30000
  },
  "ssl": {
    "verify": false // 测试时可关闭证书验证
  }
}
  1. 图片加载方式：尝试使用mode属性指定图片加载模式：
<image :src="item" mode="aspectFill" [@error](/user/error)="onImageError"></image>
回到顶部