Question

我正在尝试显示保存到我的后端文件夹的上传图像。它在不同的文件上，因此要检索，我必须将其称为http://localhost:3333/userprofile/5/5.jpeg。但这对我的本机代码不起作用，我在android和iOS上都对其进行了测试

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

当我在浏览器中打开它时可以使用。如果我使用不同的网址（例如https://picsum.photos/200/300）也可以正常工作吗？

Answer 1

从docs，

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

您需要为图片提供尺寸。

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

Answer 2

如果您使用的是Android模拟器，则必须使用10.0.2.2来访问PC上的localhost。如果您使用的是真实设备，则需要使用同一wifi网络，并且必须使用PC的IP代替localhost

React Native：从本地主机提供URI不会渲染图像

2 个答案: