reactjs - 图像未在 React 中加载，也没有错误

Question

我正在创建一个 React 应用程序。我已多次检查特定文件夹。但我在我的应用程序中加载图像时遇到问题。

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" />