Webpack CSS 背景图片未显示

Question

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

我有以下 css class:

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

用法（使用 React 所以 class名称不是 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'
    ]
  },

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

谢谢。

Answer 1

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

Answer 2

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

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

以下对我有用。

publicPath: 'http://localhost:8080'

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

Webpack CSS 背景图片未显示

Webpack CSS Background Image Not Showing

css

background-image

webpack

webpack-dev-server