Image is not Loading in React,No error as well

Question

I am creating a react app .I have checked out the particular folder many times.But i have problem loading image in my app.

function App() {

  return (
<div>
  <Navbar color="dark">
    <NavbarBrand className="navbar-brand" href="/">Cheat Sheet</NavbarBrand>
  </Navbar>
  <Jumbotron className="jumbotron">
    <p className="lead">
      Here is all you need for your Revisions and Quick Review.
      <hr my-2/>
    </p>
    <Button  className="lead bg-primary ml-5">About</Button>
  </Jumbotron>
  <div className="Container">
    <div className="Row">
      <div className="co1-12 col-md-12">
        <Card>
          <CardImg width="100%"src="./images/girl_640.png" alt=" "/>
          <CardBody>
      <CardTitle>Math Cheat sheet</CardTitle>
      <CardText>Quick Review,Formulas for Mathematics</CardText>
      </CardBody>
        </Card>
      </div>
    </div>
  </div>
  
  <footer color="dark">
   
  </footer>
       </div>
  )
}

I dont have any error in the console for the image as well.

I even tried using

src="/images/girl_640.png"

My folder structure is :

src ->app.js
    ->images
     girl_640.png

Answer 1

Assuming that you are using "create-react-app" or a similar webpack setup you should create a public folder and move the image in there.

Folder structure: src/public/images/girl_640.png

JSX code: <img src="/images/girl_640.png" />