2

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
1
  • 1
    You can try loading the image using the base image component in react. <img src={car} alt="image desc" /> Commented Aug 26, 2020 at 7:13

1 Answer 1

4

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

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.