Why do my pictures not render when using react? - reactjs

Question

I used default create-react-app to create a react app. However, when i try to add cards that contain pictures my image does not render. I get a white screen....
My image is located in a folder in src called Images. The rest works until I add in the Card prop and then the screen goes fully white. So I suppose that means it is not working or rendering properly.
import React from 'react';
export default function Card(props) {
return (
<div className="card">
<img src={require("./Images/monstera.jpeg")} alt="monstera"></img>
<div className="card-stats">
<p>{props.name}</p>
<p>{props.price}</p>
</div>
</div>
)
}
import logo from './logo.svg';
import './App.css';
import React from 'react';
import Header from './Components/Header';
import Inventory from './Components/Inventory';
import Cart from './Components/Cart';
import data from './data';
import Card from './Components/Card';
function App() {
return (
<div className="App">
<Header></Header>
<div className="row">
<Inventory>
<div className="cards-list">
<Card>
</Card>
</div>
</Inventory>
<Cart></Cart>
</div>
</div>
);
}
export default App;
Is there something I am doing wrong? Is there a special way to render a react app with an image?

Answer 1

look for any error through console and try cleaning your code a little
turn this
function App() {
return (
<div className="App">
<Header></Header>
<div className="row">
<Inventory>
<div className="cards-list">
<Card>
</Card>
</div>
</Inventory>
<Cart></Cart>
</div>
</div>
);
}
export default App;
into this
function App() {
return (
<div className="App">
<Header />
<div className="row">
<Inventory />
<div className="cards-list">
<Card />
</div>
<Cart />
</div>
</div>
);
}
export default App;
if not required don't use so many div