webpack 2 和 CSS 中的背景图像答案

【问题标题】：webpack 2 and background images in csswebpack 2 和 CSS 中的背景图像
【发布时间】：2017-10-22 11:34:28
【问题描述】：

我在 react 应用程序中使用 webpack2（我对它很陌生）。当我通过 img 标签在应用程序中加载图像时，一切正常。但是当使用图像作为css中的背景url时，我无法让它工作。

这是我的 webpack：

`module.exports = {
  devtool:isDev ? 'cheap-module-eval-source-map' : 'source-map',
  entry: [
    'react-hot-loader/patch',
    'webpack-hot-middleware/client',
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  module: { 
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'src'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              babelrc: false, 
              presets: [
                ['es2015', {modules: false} ],
                'react',
                'stage-2'
              ],
              plugins: ['react-hot-loader/babel']
            }
          }
        ]
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          failOnWarning: true,
          failOnError: true
        }
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpe?g|gif|ico)$/,
        use: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?prefix=assets/[name].[hash].[ext]&limit=10000&mimetype=image/svg+xml'
      },
    ]
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
};`

我使用express js作为服务器，但我认为这与问题无关。

然后在我的css文件中

background: url('/assets/logo.svg');

如果我更改路径我得到一个错误但如果我使用绝对路径没有错误，网络选项卡返回 304 但如果我去 localhost/assets/logo.svg 它只是重新加载页面并且徽标是未加载。我搜索了许多 SO 问题，但我无法弄清楚我的代码有什么问题。

【问题讨论】：

你是如何在你的 React 应用中加载你的 CSS 的？
由 webpack 内联加载

标签： javascript webpack webpack-2 urlloader webpack-file-loader

【解决方案1】：

您的 webpack-dev-server 配置中似乎存在问题。例如，devServer.contentBase 应该是 absolute path：

output: {
    publicPath: '/',
    path: __dirname + "/dist",
    filename: "[name].js"
},

【讨论】：

【解决方案2】：

在您的 CSS 中，您指的是“/assets/logo.svg”。我猜这是您的服务器提供的公共路径。您必须从相对路径加载图像，即文件所在的路径。如果您在“assets/logo.svg”中有您的图片，那么您必须使用此网址。

background: url('assets/logo.svg');

assets 是您的图片所在的文件夹。

【讨论】：