Saving files and images to DiskStorage using multer and corresponding uri into mongodb

Question

I am trying to save data and an image files to mongodb but since Mongodb has a 16mb document limit, I intended to store the actual image in my DiskStorage and save the related information and the images url to the mongodb. It works fine but there are few problems I am facing:

1. I am getting [TypeError: Network failed] in the frontend even though the data gets saved in the Mongodb and also the actual images get saved in my disk storage folder
2. Retrieving the data from mongodb works ok but using the url's for the actual images to access the images saved in my diskstorage is not working , giving an error of [warning: image source "Server/uploads/1686123536676-image_0.jpg" doesn't exist] even though it does exist. the following are the both the frontend and the backend codes I am using

// const path_add = "../../../Server/";
   const path_add = "http://10.0.2.2:4000/Server/";

React.useEffect(() => {
  const fetchItems = async () => {
    try {
      const response = await fetch("http://10.0.2.2:4000/fetchSellItems");
      const result = await response.json();
      if (response.status === 200) {
        const newArray = [];
        result.message.forEach(element => {
          element.itemImages = (path_add + element.itemImages).replace(/\\/g, '/');
          newArray.push(element); 
        });
        
        setSellItems(newArray);
      } else {
        console.log("There was an error fetching the sell items in the else frontend");
      }
    } catch (error) {
      console.log("Error fetching in the catch", error);
    }
  };
  fetchItems();
}, []);
    return (
        <SafeAreaView style={{backgroundColor: bgcolr,paddingBottom: 70}}>
            <FlatList 
            onScroll={handleScrol}
            data={sellItems}
            keyExtractor={(item, index) => item._id}
            renderItem={({item,index})=>{
                return (
                    <View>
                        <Text>{item.itemName}</Text>
                        <Text>{item.itemDetails}</Text>
                        /*<Image style={{height:100,width:100}} source={require(item.itemImages)}/>*/
                        <Image style={{height:100,width:100}} source={{uri:item.itemImages}}/>
                        <Text>{item.itemPrice}</Text>
                    </View>

                )
            }}
            />

and the backend code is that

export const fetchItemsToSell = async(req,res)=>{
    try {
        const fetchedDate = await Item.find()
        if(fetchedDate){
            console.log("The items are retrieved successfully",fetchedDate)
            res.status(200).json({message:fetchedDate})
        }
        else{
            console.log("in the else of backend",fetchedDate)
        }
    } catch (error) {
        console.log("Error in the catch backend",error)
    }
}
const storage = multer.diskStorage({
  destination: (req,file,cb)=>{
    cb(null,"uploads/")
  },
  filename: (req,file,cb)=>{
    cb(null,Date.now()+"-"+file.originalname);
  }
})
const upload = multer({storage:storage}).array("itemImages",4)
app.get("/fetchSellItems",fetchItemsToSell)

While debugging

For 1st problem: I am actually running it in my react native android emulator and it's connected with the network and it does work fine when posting non files(just normal text body is posted to the Mongodb without any network error). but I didn't know how to debug this

For 2nd Problem: I tried appending a path_add to the url's since my frontend code that was making a fetch request was in ProjectFolder/Client/Src/Sell.js and the actual server and it's image folder was in ProjectFolder/Server/uploads, but I was still getting the same error. also tried to do add the full server address like "http://10.0.2.2:4000/Server/", I don't see the warning but the images don't get displayed either.