没有显示的Webpack CSS背景图像

Question

我在使用网络包时显示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>

以下是我的＆＃39; web_build＆＃39; webpack将我的所有文件捆绑到的文件夹。突出显示的是罪魁祸首的形象。

以下是我在chrome dev工具的Network选项卡中看到的捆绑SCSS文件。没有图像文件显示在＆＃39; Img＆＃39;标签

.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'
    ]
  },

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

感谢。

Answer 1

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

解决方案：关闭源代码或指定完全限定的publicPath网址。

以下对我有用。

publicPath: 'http://localhost:8080'

此处提供更多信息 https://github.com/webpack/style-loader/issues/55

Answer 2

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