反应：部署到服务器时背景图像未加载答案

【问题标题】：React: background image not loading when deployed to server反应：部署到服务器时背景图像未加载
【发布时间】：2017-05-25 17:48:41
【问题描述】：

我正在使用 webpack 转译我的 reactjs 代码。当我在 webpack 开发服务器上本地运行它时，我可以看到我的背景图像。但是，当我将其部署到服务器时，图像不会显示。我认为这一定是某种路径问题。

css

.centerbg {
    background: url(/images/centerbg.jpg) no-repeat;
}

jsx

<div className="centerbg">

</div>

webpack 加载器

        {
            test: /\.(woff|ttf|eot|svg|png|jpg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
            loader: 'url-loader',
            options: {
                limit: 10000
            }
        }

文件路径

build/main.js
images/centerbg.jpg
index.html

【问题讨论】：

路径需要相对于应用程序的根目录，这样当你的所有 JSX 被转译成单个 JS 文件时，路径仍然保持不变。因此，理想情况下，它应该是相对的 index.html 所在的位置。在您的快速服务器中，您需要设置所有请求所基于的路径（通过设置 app.use('/'....); 从哪里获取资源[这是整个应用程序的基本 URL]）然后在您的 JSX 中您可以使用 url(images/potato.jpg) 和当它被转译时，生成的 JS 文件将位于同一根目录中，因此路径仍然有效（路径前面没有斜杠）
我没有使用快递。这是在生产中托管的 IIS。在开发中，我正在使用 webpack 开发服务器。背景：url（..\images\centerbg.jpg）或背景：url（images/centerbg.jpg）不起作用。

标签： css reactjs webpack-2

【解决方案1】：

这是一个错误，通常是由于 output.publicPath 配置没有被明确声明。

将其设置为提供资产的路径。对于基本场景，这就足够了：

output: {
    publicPath: '/',
    //...
},

【讨论】：

我确实定义了我的 publicPath。它的 publicPath: 'build' 在我的情况下，因为我的资产是从那里提供的。