首页 > 解决方案 > React Native:从本地主机服务 URI 不呈现图像

问题描述

我正在尝试显示从我的后端文件夹保存的上传图像。它在不同的文件上,所以要检索我必须调用它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 ),它也可以工作如何处理?

标签: javascriptreactjsreact-native

解决方案


文档中,

您将在应用程序中显示的许多图像在编译时将不可用,或者您需要动态加载一些图像以减小二进制大小。与静态资源不同,您需要手动指定图像的尺寸。强烈建议您也使用 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 
/>

推荐阅读