Question

我正在使用create-react-app开发我的react应用并将其部署到Github页面。我的应用程序在开发中可以正常工作。但是当我部署时，它成功部署，但是背景图像无法加载。

在index.css文件中加载背景图片：

body::after {
  background-image: url("/background-img.jpg");
}

package.json上的主页

{
  "homepage": "http://bigfanjs.github.io/my-repo/",
}

应用程序目录上的背景图片：

| build
    | background-img.jpg
| src
| public
    | background-img.jpg

在控制台上：

获取https://bigfanjs.github.io/background-img.jpg 404（）

最后，当我在开发人员工具上将URL编辑为url(/my-repo/background-img.jpg)时，就会加载

。

Answer 1

更新

您标记了create-react-app，您是否一步一步地遵循了README？应该可以。

找不到404的主要原因是因为基本路径与/不匹配。

请在您的publicPath: /my-repo/中添加output中的webpack.config.js。

Answer 2

可能是您的BrowserRouter标记中缺少basename属性。 Here可以找到有关React路由器的更多信息。 BrowserRouter示例：

<BrowserRouter basename="/calendar"/>
<Link to="/today"/>

调用该图像时，您还必须牢记您所处的路线，您可能必须留下两个目录才能调用该图像

Answer 3

我有类似的问题。只需在所有文件路径前加一个句号即可解决。我的照片也位于公共文件夹中。

Answer 4

我不知道这是否最近改变了，但是我只是通过检查我的图像在github存储库上的页面并查看那里实际图像的属性来解决此问题。

您可以将URI放在整个github页面上没有任何意义，但是显然只需在其后添加?raw=true即可。

像这样使用URI：https://github.com/I-keep-trying/demo5/blob/master/src/images/space.jpg导致空白的白色背景。

什么DID起作用：https://github.com/I-keep-trying/demo5/blob/master/src/images/space.jpg?raw=true

Answer 5

我遇到了这个问题，我通过在使用图像的任何.js文件中显式导入图像文件来解决了这个问题。

因此，如果您的相对路径为Suspension functions can be called only within coroutine body，则可以使用'./images/chess.png'

导入