如何使用本机反应显示/渲染来自 mongoDB 的图像？答案

【问题标题】：How do I display/render image from mongoDB with react native?如何使用本机反应显示/渲染来自 mongoDB 的图像？
【发布时间】：2020-08-27 06:24:10
【问题描述】：

我一直在研究和尝试许多我能想到的解决方案；

我想将我的 MongoDB Atlas 服务器中的图像渲染或显示到我的 react native 应用程序。我已经使用 multer 完成了后端工作以获取文件 req 并将其保存在我的 ../assets/ 文件夹中，但是当我尝试获取它并使用它是空白或显示一个数字，例如 22。

这是 multer 后我的文件路径并保存在我的 MongoDB 中

../assets/15985061325795950a472-5363-43b7-851e-e2afab049d0f.jpg

这是我的标签

<Image source={photo} style={styles.image} borderRadius={10} />

我得到空白屏幕；我尝试使用 require() 但它需要一个字符串，而不是 {photo}。

我正在使用 Expo-Client。

感谢您的宝贵时间。

【问题讨论】：

【解决方案1】：

来自你的照片路径：

 ../assets/15985061325795950a472-5363-43b7-851e-e2afab049d0f.jpg

您似乎在获取后将图像文件存储在本地。所以对于本地图像文件，我们必须使用 source={require('localPath')}。

所以你应该试试

 <Image source={require('localPath')} />

【讨论】：

我正在循环父组件中的每个图像并将图像值传递给它的子组件 {photo} 图像是动态填充的，应用于 require("localPath") 可能会有所不同，但 require( {photo}) 不接受已通过的照片。

【解决方案2】：

试试这个：

<Image source={require('your path')} />

【讨论】：

【解决方案3】：

您需要放置图片位置的完整路径，因为它不在您的项目文件夹中。在您的图像组件中的URL 中类似于

<image
source={{ uri: SERVER_IP + '/assets/15985...049d0f.jpg' }}
/>

所以 SERVER_IP 可以像 yourwebsite.com 或 127.0.0.1:3000 如果您仍在本地。并删除..

【讨论】：