Images not loading from uri source in React Native project

Question

I made a custom element, called FoodItem, which is to be found in the FoodItem.js file and it has the following structure:

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  ImageBackground,
  Image,
  Dimensions,
  TouchableOpacity,
} from "react-native";

// any food item has the following properties:
// 1. image
// 2. title
// 3. description
// 4. price
// 5. key

const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");

export default class FoodItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TouchableOpacity style={styles.bubbleItem}>
        <Image style={styles.bubbleImage} source={{ uri: this.props.imgSrc }} />
        <Text style={styles.bubbleTitle}>{this.props.title}</Text>
        <Text style={styles.bubbleDescription}>{this.props.description}</Text>
        <View style={styles.bubblePrice}>
          <Text style={styles.priceText}>{this.props.price} RON</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  bubbleItem: {
    flex: 1,
    backgroundColor: "#e3dede",
    margin: 10,
    borderColor: "#bab5b5",
    borderWidth: 2,
    borderRadius: 30,
  },
  bubbleTitle: {
    fontWeight: "bold",
    alignSelf: "center",
    textAlign: "center",
    fontSize: 20,
  },
  bubbleDescription: {
    textAlign: "center",
    padding: 5,
  },
  bubblePrice: {
    position: "absolute",
    backgroundColor: "black",
    margin: 10,
    borderColor: "#bab5b5",
    borderWidth: 2,
    borderRadius: 30,
    left: WIDTH * 0.235,
    top: HEIGHT * 0.14,
  },
  bubbleImage: {
    width: WIDTH * 0.44,
    height: HEIGHT * 0.2,
    borderRadius: 30,
  },
  priceText: {
    color: "white",
    margin: 5,
  },
});

The most relevant line for this question, from the above class, is:

<Image style={styles.bubbleImage} source={{ uri: this.props.imgSrc }} />

I am calling instances of FoodItem elements this way:

<FoodItem
    key={item.id}
    imgSrc={`http://localhost:3000/getImage/${item.image}`}
    title={item.title}
    description={item.description}
    price={item.price}
/>

It is not that relevant where the item object came from. All that matters is that the item object is, for sure, a valid object, having the following structure:

{
    id: 10,
    image: '1.png',
    title: 'Burger',
    description: 'contine vita si sos cu maioneza',
    price: 35
}

This is my relevant express backend server side code:

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const port = 3000;

app.use("/getImage", express.static("uploads"));

server.listen(port, () => console.log("server running on port:" + port));

Therefore, the FoodItem elements are trying to access links where images are served statically from the ./uploads folder (for sample: https://localhost:3000/getImage/1.png). In fact, I know for sure the images are delivered as they are supposed to be, because, when I access these uris from the web browser, they do get delivered. For some reason, the images are not loading inside the FoodItem elements, even though they would load images from remote uris; for sample, this works just fine (the image is loading inside the FoodItem elements):

<FoodItem
    key={item.id}
    imgSrc={
        "https://cdn-media-1.freecodecamp.org/images/1*y6C4nSvy2Woe0m7bWEn4BA.png"
    }
    title={item.title}
    description={item.description}
    price={item.price}
/>