CSS背景未部署答案

【问题标题】：css backgrounds not deployingCSS背景未部署
【发布时间】：2018-05-14 15:32:58
【问题描述】：

我正在尝试使用 HashRouter 将我的 react 项目部署到 GH 页面，这使得 url：https://foo.github.io/foo-site/#/ 除了我的 css 背景图像之外，一切都运行良好。他们在本地工作，但在部署中我只得到 404。

我的文件夹结构是..

App/
|--build/
|--public/
|  |--images/
|  |  |--background.jpg
|--src
|  |--Components.js
|  |--style.css
|--package.json
|--yarn.lock

css 背景图片的路径如下所示

foo {
   background-image(/images/background.jpg)
}

什么会导致它在我的本地反应服务器上工作，但不能在部署中工作？

【问题讨论】：

部署时，您的图像位于：https://foo.github.io/foo-site/images/background.jpg?
尝试去掉第一个正斜杠，如：background-image('images/background.jpg');
是的，他们试图在foo.github.io/foo-site/images/background.jpg 进行渲染，所以我假设它需要在 /images/ 之前添加 # ？当我删除图像前的正斜杠时，它会在我的反应服务器上中断。
您的 css 图像路径是绝对的。他们需要是/foo-site/images/background.jpg
好的，没有# ?

【解决方案1】：

将我的 images/ 文件夹移动到我的 src/ 文件夹中就可以了。然后我将背景图像路径更改为

foo {
   /*background-image: url(/images/background.jpg)*/
   background-image: url(images/background.jpg) 
}

【讨论】：