为什么React-bootstrap图像不会从相关路径加载？

Question

我正在学习React，我正在使用React-bootstrap作为样式。 我不确定为什么我的react-bootstrap Image不会以相对路径加载图像。我使用来自在线的随机图像进行测试时使用绝对路径进行测试，但它不起作用，但它不适用于相对路径。有谁知道如何解决这个问题？ 这是我的代码：

import {Grid, Row, Col, Image} from 'react-bootstrap';

<Row className="show-grid">
     <Col xs={11} sm={5}>
        <h5>Image</h5>
        <Image src="./src/assets/tech_digram_2.jpg" responsive />
        <Image src="./assets/person_profile_1.jpeg" responsive />
        <Image src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" responsive />
     </Col>
</Row>

文件/目录结构

Answer 1

将assets文件夹移至public目录。

我假设你正在使用create-react-app。当webpack构建您的应用程序时，它使用publicPath来确定将从哪里提供文件。默认情况下，在create-react-app中，它设置为从public目录提供。因此，一旦构建完成，您的应用只能访问public目录下的文件。将资产移至public应该可以解决问题。