I have a database with a courses table.

I want to show the image through the image path saved in the field image column.

In my react native app I have a component that lists Carts where cart's images are saved in disk

Like: C:\Users\Public\Pictures\Rectangle_2.png. Then I put the path in image column.

CartList.js

import Carts from './../Cart';
const Item = ({item}) => {
  return (
    <Carts
      name={item.name}
      price={item.price}
      offPrice={item.offPrice}
      image={item.image}
    />
  );
};
class CartList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }
  componentDidMount() {
    this.requestAPI();
  }
  requestAPI = () => {
    const apiURL = 'http://myApi/api/courses';
    fetch(apiURL)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          data: responseJson,
        });
      });
  };

  renderItem = ({item}) => {
    return <Item item={item} />;
  };
  render() {
    return (
      <>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyEtractor={item => item.id.toString()}
        />
      </>
    );
  }
}

I access to image path through props in Cart.

Cart.js

const Cart = (props) => {
  return (
    <View
      <Image
        style={{
          width: '40%',
          height: 100,
        }}
        source={{uri:props.image}}
      />
    </View>
  );
};
export default Cart;

when I run the app, then I get this error:

How can I solve this problem?