Question

我正在尝试渲染图像“https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg”，它在网络浏览器中正常工作，但在反应原生图像中，图像不会出现。

我正在尝试：

 <Image
style={{ height: 200, width: 200 }}
source={{
    uri:
        "https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg"
}}
/>;

这也不起作用：

 <Image
style={{ flex: 1, resizeMode: "cover" }}
source={{
    uri:
        "https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg"
}}
/>;

我在这里做错了什么？

Answer 1

我尝试了你的代码，最初我没有得到图像，然后我使用 onError 处理程序处理错误并发现以下错误

发生了SSL错误，无法与服务器建立安全连接

您可以查看此错误here

的stackoverflow答案

我通过更改

尝试了第一个解决方案

info.plist中

以下配置并且有效

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

查看this文档，上面的方法是 不推荐 ，而是建议其他方式（在链接的stackoverflow答案中也会提到它））。

希望这会有所帮助。

Answer 2

对于任何认为这不是HTTPS问题的人，还请检查您的图像是否不是webp图像。

即使图像标题说是.png或.jpg，也请尝试保存图像。如果显示的是Google的WebP，则需要将图像转换为React Native友好的图像文件类型。

希望这会有所帮助！

HTTPS图像无法呈现原生图像

2 个答案: