React中未加载图像，也未出现错误

Question

我正在创建一个react应用程序，.I已经签出了特定的文件夹，许多times.But在我的应用程序中加载图像时遇到了问题。

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>
  )
}

我没有任何错误的控制台中的图像以及。

我甚至试着用

src="/images/girl_640.png"

我的文件夹结构是：

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

Answer 1

假设您使用的是"create-react-app“或类似的webpack设置，您应该创建一个public文件夹并将图像移动到其中。

文件夹结构：src/public/images/girl_640.png

JSX代码：<img src="/images/girl_640.png" />