reactjs - 部署到 Github 页面时未加载图像

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

在控制台上:

GET https://bigfanjs.github.io/background-img.jpg 404 ()

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

Answer 1

我遇到了这个问题，我通过在您使用图像的任何 .js 文件中显式导入图像文件来解决它。
所以如果你的相对路径是 './images/chess.png' ，您可以使用 import chess from './images/chess.png' 导入它
有关更多信息，请参阅此链接:https://create-react-app.dev/docs/adding-images-fonts-and-files