uni-app H5上图片和定位有冲突

uni-app H5上图片和定位有冲突

开发环境 版本号 项目创建方式
Mac 1 HBuilderX

示例代码：

ios上先显示图片，定位直接走ip定位，先定位图片展示不出来，图片链接是http的

操作步骤：

ios上先显示图片，定位直接走ip定位，先定位图片展示不出来，图片链接是http的

预期结果：

ios上先显示图片，定位直接走ip定位，先定位图片展示不出来，图片链接是http的

实际结果：

ios上先显示图片，定位直接走ip定位，先定位图片展示不出来，图片链接是http的

bug描述：

ios上先显示图片，定位直接走ip定位，先定位图片展示不出来，图片链接是http的


更多关于uni-app H5上图片和定位有冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

能具体描述问题吗，提供效果截图和代码截图可以高效率解决问题

更多关于uni-app H5上图片和定位有冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html


就是在一个页面上，我加载了一张http的图片，定位就用不了了，直接走ip定位，如果我在页面外先获取定位，这张图片就显示不了了，只有 h5 ios上面会有，把图片改成https的就没问题了

这是一个典型的iOS混合内容加载问题。由于图片使用的是HTTP协议，而定位功能需要HTTPS安全环境，iOS会优先处理安全请求导致HTTP图片加载被阻塞。

解决方案：

  1. 将图片资源升级为HTTPS协议
  2. 在manifest.json中配置H5的"mixedContent"为"compatibility"
  3. 使用uni.downloadFile预下载图片到本地

代码示例：

// manifest.json
"h5" : {
    "mixedContent" : "compatibility"
}

// 或者使用下载方案
uni.downloadFile({
    url: 'http://your-image-url',
    success: (res) => {
        this.imagePath = res.tempFilePath
    }
})
回到顶部