Question

我有一个具有此项目结构的React应用程序：

在我的Home组件和About组件中，我有两张图片将src设置为： <img src="/img/charlie1.jpg" alt="charlie home pic" /> 和<img src="/img/charlie2.jpg" alt="charlie about pic" />

所以我认为它将开始在根文件夹中查找，然后在图像文件夹中查找，然后在其中找到图片。

当我在本地计算机上进行开发时，此方法工作正常图像将正确显示。

但是当我构建它并移动文件以生成图像时，它们将无法工作它在以下路径下查找图像：https://xyz.github.io/img/charlie2.jpg而不是https://xyz.github.io/charlieReact/img/charlie2.jpg

如何解决此问题？

如果我将图像src更改为：<img src="./img/charlie1.jpg" alt="charlie home pic" />

然后它可以在github页面上工作，但是当我在本地计算机上时，图像将不会显示...

Answer 1

最好将图像导入JavaScript并在可能的情况下使用导入的变量，并且URL只能自己工作。

import charlie1 from './charlie1.jpg';

<img src={charlie1} />

如果页面的根目录不是/，并且在public目录中有资产，则很可能必须执行some extra logic in the code。

package.json

{
  "homepage": "https://xyz.github.io/charlieReact"
}

App.js

<img src={`${process.env.PUBLIC_URL}/img/charlie1.jpg`} />