部署到Github Pages时，图片无法加载

Question

我正在使用create-react-app来开发我的React应用，并将其部署到Github页面上。在开发过程中，我的应用程序可以正常运行。但是当我进行部署时，它虽然成功部署，但是背景图片却无法加载。

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

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

< p > 关于 < code > 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)时，它就会加载。

- bigfanjs

---

这个图片在构建文件夹里面可用吗？我认为 gh-pages 分支会提供构建文件夹内的文件，那应该是基础目录，所以图片应该在构建文件夹内而不是公共文件夹。 - Noushad

当然，它在构建文件夹中可用。每次构建时都会在构建文件夹中创建它。 - bigfanjs

你可以尝试使用以下代码，即不带斜杠的方式来引用背景图片： background-image: url("background-img.jpg"); }``` - Noushad

不好意思，它无法解析该路径。这是一个相对路径，Webpack 尝试在 src/ 中查找它，其中包含 index.css。谢谢。 - bigfanjs

Answer 1

注意: 在大多数情况下，这个问题出现是因为我们在 package.json 文件中设置了主页键，目的是为了部署到 GitHub Pages，在这样做时破坏了相对路径设置。

让我们看看这个:

尽管我们有像下面显示的 public 文件夹中的图像，但它没有显示在网站上:

解决方案

只需要在图片前面放置 GitHub 仓库名称作为相对路径，这样你就可以在本地查看，一旦部署到 GitHub pages，也能够查看。很酷吧?

- mabdullahse

Answer 2

好的，这篇文章是为了像我一样遇到这个问题并试图寻找一个好答案的人而写的。下面就是解决方法（对我来说也是记录）：

首先，通过在路径前面加上"."，将所有图片路径变成相对路径。例如：

<img src={"./images/logo.svg"}/>

这张图片存放在我的项目的 'public/images/' 文件夹中。

其次，在根目录下创建一个 .env 文件，并复制以下内容：

PUBLIC_URL=.

确保在点号周围没有任何引号 - 这在一开始对我不起作用。

第三，确保您的package.json文件中没有主页变量。

就这样！ 在尝试各种解决方案后，这对我有用。 我很感激还有其他方法可以做到这一点，但是使用react-gh-pages部署我的react项目变得非常容易。

希望它有所帮助！

- Narcis

Answer 3

我曾经遇到过这个问题，通过在你所使用的图像的 .js 文件中明确导入图像文件来解决了它。

因此，如果你的相对路径是 './images/chess.png'，那么可以使用 import chess from './images/chess.png' 导入它。

点击此链接获取更多信息：https://create-react-app.dev/docs/adding-images-fonts-and-files

- eracer9

Answer 4

我遇到了类似的问题，但我的问题出现在本地服务器上，在设置gh-pages之后，图片无法显示。

所有这些都是由于package.json中的homepage属性引起的。

当删除homepage属性时的屏幕截图。 当主页属性存在时的屏幕截图。 要解决此问题，只需在项目根文件夹中创建.env文件，并添加以下内容：

PUBLIC_URL="."

- Talat El Beick

---

那不起作用，兄弟。 - heyom

Answer 5

我不知道最近是否有更改，但我通过检查存储在我的github库中的图像所在页面的属性并查看实际图像的属性来解决了这个问题。 图片属性 似乎仅仅添加?raw=true就可以，而不是将整个github页面的URI放入其中。

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

有效的方法是：https://github.com/I-keep-trying/demo5/blob/master/src/images/space.jpg?raw=true。

- user288597

Answer 6

我认为 @Narcis的回答提供了最有用的信息，但我想强调他们回答中的一个关键点。

确保在package.json文件中没有homepage变量

我已经从变量中删除了homepage文本，但仍然将其设置为homepage: '.'。完全删除它。

此外，如果你特别因为在AWS Amplify中部署React应用时图片无法加载而来到这里，这很可能是一个原因（尤其是如果你已经检查了重写和尝试了其他修复方法）。

- McGruck

---

这并没有回答问题。一旦你有足够的声望，你就能够评论任何帖子；相反，提供不需要提问者澄清的答案。- 来自审查 - undefined

Answer 7

我曾经遇到过类似的问题。只需在所有文件路径前面加上一个句点即可解决。我的图片也存储在公共文件夹中。

- Wiley Buchanan

Answer 8

在我的情况下，process.env.PUBLIC_URL 运作良好。 我添加了文件 "public/img/logo.svg"。

- UdevApp

Answer 9

我曾经遇到过同样的问题并解决了它，gh-pages 文件名是区分大小写的，因此如果文件名为 File.jpg 或 file.JPG，则 file.jpg 将无法正常工作。

- Joe Giusti

Answer 10

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

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

在调用该图像时，您还必须记住所在的路线，可能需要离开两个目录才能调用该图像。

- Lucas Suarez