如何使用 React Native 從 mongoDB 顯示/渲染圖像？

Question

我一直在研究和嘗試我能想到的許多解決方案；

我想將我的圖像從我的 MongoDB Atlas 服務器渲染或顯示到我的本機應用程序。 我已經使用 multer 完成了后端工作來獲取文件 req 並將其保存在我的 ../assets/ 文件夾中，但是當我嘗試獲取它並使用 <Image source={{uri: photo}}/> 它是空白或顯示一個數字，例如 22。

這是multer之后我的文件路徑並保存在我的MongoDB中

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

這是我的標簽

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

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

我正在使用 Expo-Client。

謝謝你的時間。

Answer 1

從你的照片路徑：

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

似乎您在獲取后將圖像文件存儲在本地。 所以對於本地圖像文件，我們必須使用 source={ require('localPath') }。

所以你應該試試

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

Answer 2

嘗試這個：

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

Answer 3

您需要放置圖片位置的完整路徑，因為它不在您的項目文件夾中。 在圖像組件的URL中，它類似於

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

所以SERVER_IP可以像yourwebsite.com或127.0.0.1:3000如果你還在本地。 並刪除..