Блог

Главная - Вопросы по программированию - Изображение не загружается в React, ошибок также нет

Изображение не загружается в React, ошибок также нет

#reactjs

#reactjs

Вопрос:

Я создаю приложение 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

Комментарии:

1. Вы можете попробовать загрузить изображение, используя компонент базового изображения в react. <img src={car} alt="image desc" />

Ответ №1:

Предполагая, что вы используете «create-react-app» или аналогичную настройку webpack, вам следует создать public папку и переместить изображение туда.

Структура папок: src/public/images/girl_640.png

Код JSX: <img src="/images/girl_640.png" />