React Bootstrap 组件在我的 App.js 中加载时没有出现

Question

I've created a react component called ImagePost and when I call it in my App.js it doesn't appear.

import Container from 'react-bootstrap/Container';
import Image from 'react-bootstrap/Image'
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

const ImagePost = () => {
  return (
    <div>
      <Container fluid>
        <Row>
          <Col xs={6} md={4}>
            <Image className='fluid' src={require('../Images/lonepeak.jpg')} responsive/>
          </Col>
        </Row>
      </Container>
    </div>
  )
}

export default ImagePost

Files

Answer 1

Try updating your relative path for the image source to:

src={require("./../Images/lonepeak.jpg")}

Alternatively import your image same as you would any other resource/package:

import lonepeak from "./../Images/lonepeak.jpg";

and use it like this:

src={lonepeak}