React Native：从本地主机服务 URI 不呈现图像答案

【问题标题】：React Native: Serving URI from localhost not rendering the imageReact Native：从本地主机服务 URI 不呈现图像
【发布时间】：2019-09-20 08:42:37
【问题描述】：

我正在尝试显示从我的后端文件夹中保存的上传图片。它在不同的文件上，所以要检索我必须调用它http://localhost:3333/userprofile/5/5.jpeg。但它不适用于我的 react 本机代码，我在 android 和 IOS 上都对其进行了测试

<Thumbnail
    small
    source={{
        uri: `http://localhost:3333/userprofile/${this.props.user.id}/${this.props.user.avatar}`
    }}
/>

当我在浏览器上打开它时它可以工作。如果我使用不同的网址（如https://picsum.photos/200/300），它也可以工作如何处理？

【问题讨论】：

你可能有 CORS 错误
您确定this.props.user.avatar 包含类似.jpeg 的扩展名吗？如果没有，则需要手动添加。
source={{...}}我对这个json语法有疑问
@LazarNikolic 我的 cors 配置对所有人开放
@ravibagul91 如果我以文本形式输出它正好是 http:/localhost:3333/userprofile/5/5.jpeg 并且当我在浏览器上复制和粘贴时它可以工作

标签： javascript reactjs react-native

【解决方案1】：

来自docs，

您将在应用程序中显示的许多图像在编译时将不可用，或者您需要动态加载一些图像以减小二进制大小。与静态资源不同，您需要手动指定图像的尺寸。强烈建议您也使用 https 以满足 iOS 上的应用程序传输安全要求。

您需要为图片提供尺寸。

<Thumbnail
    small
    source={{
        uri: `http://localhost:3333/userprofile/${this.props.user.id}/${this.props.user.avatar}`
    }}
    style={{width: 400, height: 400}} //provide dimensions 
/>

【讨论】：

【解决方案2】：

如果您使用的是安卓模拟器，您必须使用10.0.2.2 来访问您电脑上的本地主机。如果您使用的是真实设备，那么您需要在同一个 wifi 网络上，并且必须使用您 PC 的 ip 而不是localhost

【讨论】：

谢谢，我用 '10.0.2.2' 替换了 localhost 并且成功了