i am trying to use an image source with require function or uri in react native but the source will be use in calling the function that has the image, it doesn't work with me.

this is the image the contains the structure of the project and the image folder.

this is the card file code:

import { View, Image, StyleSheet } from "react-native";
import colors from "../config/colors";
import React from "react";
import BookStoreText from "./BookStoreText";

function Card(title,subtitile,image) {
    return (
      <View style={styles.card}>
        <Image source={image} />
        <BookStoreText>{title}</BookStoreText>
        <BookStoreText>{subtitile}</BookStoreText>
      </View>
    );
}
const styles = StyleSheet.create({
    card:{
        borderRadius:15,
        backgroundColor:colors.white,
        marginBottom:20,
    }
})

export default Card;

this is the app.js source code:

//import WelcomeScreen from "./app/screens/WelcomeScreen";
//import colors from "./app/config/colors";
//import ViewImageScreen from "./app/screens/ViewImageScreen";
//import { MaterialCommunityIcons } from "@expo/vector-icons";
//import AppButton from "./app/components/AppButton";
import { View } from "react-native";
import React from "react";
import Card from "./app/components/Card";
function App() {
  return (
    <View
      style={{
        padding: 20,
        paddingTop: 100,
        backgroundColor: "#f8f4f4",
      }}
    >
      <Card
        image={require("./app/assets/chair.jpg")}
      ></Card>
    </View>
  );
}
export default App;

what i tried: i tried to use uri with the image istead of using require function but it doesn't work