Webpack CSS背景图像不显示答案

【问题标题】：Webpack CSS Background Image Not ShowingWebpack CSS背景图像不显示
【发布时间】：2016-11-12 00:16:13
【问题描述】：

我在使用 webpack 时无法显示 css 背景图像。

我有以下 css 类：

.fb {
  display: block;
  width:30px;
  height: 30px;
  background-color: red;
  background-image: url('../images/icons/facebook.png');
}

用法（使用 React 所以 className 不是 class）：

<div className="fb"></div>

下面是我的“web_build”文件夹的图像，webpack 将我的所有文件捆绑到其中。突出显示的是罪魁祸首图像。

以下是我在 chrome 开发工具的“网络”选项卡中看到的捆绑 SCSS 文件。 “Img”选项卡上不显示任何图像文件。

.fb {
  display: block;
  width: 30px;
  height: 30px;
  background-color: red;
  background-image: url(1b725f86d1e04faadfad0cda2ac6ee89.png); 
}

我看到的只是一个 30x30 像素的红色方块。

注意事项：

如果我使用<img> 标记直接引用图像，则会显示图像。
我正在使用 webpack-dev-server
我正在使用具有以下配置的 image-webpack-loader

{
    test: /\.(jpe?g|png|gif|svg|ttf|eot|svg|woff(2)?)$/i,
    loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },

如果需要任何其他信息，请告诉我。

谢谢。

【问题讨论】：

标签： css webpack background-image webpack-dev-server

【解决方案1】：

经过一番搜索后发现，在我的 CSS/SASS 捆绑中包含 sourceMap 会破坏 CSS 中的相对图像 URL。

解决方案：关闭源映射或指定完全限定的 publicPath URL。

以下内容对我有用。

publicPath: 'http://localhost:8080'

更多信息在这里 https://github.com/webpack/style-loader/issues/55

【讨论】：

【解决方案2】：

image-webpack-loader 仅使用 imagemin 压缩图像。使用 url-loader 或 file-loader 将文件加载到您的 css 中。

【讨论】：