uni-app 公众号H5使用https网络图片安卓和开发工具能显示 ios不能显示的原因

uni-app 公众号H5使用https网络图片安卓和开发工具能显示 ios不能显示的原因

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：
uniapp/H5

浏览器平台：
微信内置浏览器

HBuilderX类型：
正式

HBuilderX版本号：
3.99

示例代码：

<image src="https://baodaotong.dujiajuhui.com/uploads/image/20240123/d09e28a3a59101709d469a15bb04d383.png" class="tabs-item-icon" mode="widthFix">
</image>

操作步骤：

<image src="https://baodaotong.dujiajuhui.com/uploads/image/20240123/d09e28a3a59101709d469a15bb04d383.png" class="tabs-item-icon" mode="widthFix">
</image>

预期结果：

<image src="https://baodaotong.dujiajuhui.com/uploads/image/20240123/d09e28a3a59101709d469a15bb04d383.png" class="tabs-item-icon" mode="widthFix">
</image>

实际结果：

<image src="https://baodaotong.dujiajuhui.com/uploads/image/20240123/d09e28a3a59101709d469a15bb04d383.png" class="tabs-item-icon" mode="widthFix">
</image>



更多关于uni-app 公众号H5使用https网络图片安卓和开发工具能显示 ios不能显示的原因的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

试了 可以显示，你换张图片试试，https://qiniu-ecdn.dcloud.net.cn/uploads/images/hbuilderx/icon/hbuilderx_icon@2x.png

更多关于uni-app 公众号H5使用https网络图片安卓和开发工具能显示 ios不能显示的原因的实战教程也可以访问 https://www.itying.com/category-93-b0.html


图片有时候能显示，有时候显示443，但是项目里面一直不能显示

回复 1***@qq.com: 让运维看看，像是图片服务器的问题

在开发uni-app的公众号H5项目时，如果遇到在安卓和开发工具中能正常显示HTTPS网络图片，但在iOS设备上无法显示的情况，可能的原因和解决方法如下：

1. HTTPS证书问题

  • 原因：iOS对HTTPS证书的要求比安卓更严格。如果图片链接的HTTPS证书无效、过期、自签名或不匹配，iOS可能拒绝加载图片。
  • 解决方法：
    • 确保图片链接的HTTPS证书是有效的，并且由受信任的证书颁发机构（CA）签发。
    • 使用工具（如 SSL Labs）检查证书的有效性。
    • 如果使用自签名证书，建议更换为受信任的证书。

2. 图片格式问题

  • 原因：某些图片格式（如WebP）在iOS上可能不被完全支持，尤其是在旧版本的iOS设备上。
  • 解决方法：
    • 确保图片格式是iOS支持的格式（如JPEG、PNG）。
    • 如果需要使用WebP格式，可以在服务器端根据设备类型动态返回不同的图片格式。

3. 跨域问题

  • 原因：如果图片资源来自其他域名，且未正确配置跨域资源共享（CORS），iOS可能会阻止加载。
  • 解决方法：
    • 确保图片服务器正确配置了CORS头，允许你的域名访问资源。例如：
      Access-Control-Allow-Origin: https://your-domain.com
    • 如果无法配置CORS，可以将图片下载到自己的服务器，再通过自己的域名提供访问。

4. 缓存问题

  • 原因：iOS可能缓存了错误的图片资源，导致无法显示更新后的图片。
  • 解决方法：
    • 在图片链接中添加时间戳或版本号，强制刷新缓存。例如：
      <img src="https://example.com/image.jpg?v=123456" />
回到顶部