HTTPS 图像未在反应本机图像中呈现答案

【问题标题】：HTTPS image not rendering in react native imageHTTPS 图像未在反应本机图像中呈现
【发布时间】：2018-04-25 13:09:21
【问题描述】：

我正在尝试渲染图像“https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg”，该图像在 Web 浏览器中运行良好，但在 react-native 图像中，图像不会出现。

我正在尝试做：

 <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"
}}
/>;

我在这里做错了什么？

【问题讨论】：

尝试删除 URL 中 // 之前的“https”。
你的意思是像 ://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg 还是像 www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg ？
没有:
两者 //www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc‌42.jpg 和 www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc‌42.jpg 都不适用于我。

标签： javascript image react-native

【解决方案1】：

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

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

您可以查看此错误的 stackoverflow 答案here

我通过更改尝试了第一个解决方案

info.plist

使用以下配置，它可以工作

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

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

希望这会有所帮助。

【讨论】：

没有错误，图片只是没有出现。您是否能够让它与该配置一起使用？
你试过onError处理回调并检查控制台上的错误吗？
尝试像这样<Image onError={(e) => console.log(e.nativeEvent.error) } style={{height: 200, width: 200}} source={{uri:'https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg'}}/> 得到错误。更改 info.plist 后也重新构建您的应用程序。
我收到了 SSL 错误，无法与服务器建立安全连接。
是的，我得到了同样的错误，然后我更改了 info.plist 并使用缓存重置重新启动 npm 服务器，然后重新部署应用程序并且它工作。你重新部署了 apo 吗？