React Bootstrap 組件在我的 App.js 中加載時沒有出現

Question

我創建了一個名為 ImagePost 的反應組件，當我在 App.js 中調用它時它不會出現。

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

文件

Answer 1

嘗試將圖像源的相對路徑更新為：

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

或者像導入任何其他資源/包一樣導入您的圖像：

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

並像這樣使用它：

src={lonepeak}