反应本机：名称中带有空格的图像不会在 IOS 中加载（设备，不是 https 问题）

Posted 2023-02-22

【中文标题】反应本机：名称中带有空格的图像不会在 IOS 中加载（设备，不是 https 问题）

【英文标题】：React native: images with space in name won't load in IOS (device, not https issue)

【发布时间】：2018-06-10 06:42:46

【问题描述】：

名称中带有空格的图像不会在 ios 中加载，对于 android，它通过将空格替换为 %20 来工作，但此解决方案在 ios 上不起作用。反应原生。

我正在使用 uri 在普通的图像容器中远程加载图像。没有空间加载的图像很好。

【问题讨论】：

你是如何加载它们的？在网络视图中？ html?问题需要更多信息

普通图片组件

嗯，如果它适用于 Android 而不适用于 iOS，我怀疑它与文件系统权限有关。

其他图片（名称中没有空格）是否正常加载？

是的，在 uri 中没有空格的图像工作得很好......并且在 android 中都可以工作

【参考方案1】：

encodeURI("http://www.yourdomain.tld/sample image.jpg")

输出

http://www.yourdomain.tld/sample image.jpg

to

http://www.yourdomain.tld/sample%20image.jpg

用法

<Image source=uri: encodeURI(fileUri) />

最好的办法是使用js内置的javascript函数encodeURI

因为我们还必须转换 URL 中的一些特殊字符

【参考方案2】：

<Image source=uri: fileName.replace(/ /g, '%20') style=styles.image />

适用于 react-native@0.59.5