webpack 2 and background images in css

Question

I am using webpack2 (I am very new to it) in a react app. Everything works fine when I am loading images inside the app, via the img tag. But I cannot have it working when using the image as background url inside the css.

this is my 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
  }
};`

I am using express js as a server, but I think this is not relevant for the problem.

Then in my css file I have

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

If I change the path I get an error but if I use the absolute path there is no error, the network tab returns 304 but if I go to localhost/assets/logo.svg it just reload the page and the logo is not loaded. I have searched in many SO questions but I cannot figure out what is not working on my code.

Answer 1

In your css you are referring to "/assets/logo.svg". I guess this is the public path served by your server. You have to load the image from the relative path, the path where is your file. If you have your image in "assets/logo.svg" then you would have to use this url.

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

Where assets is the folder where your image is.

Answer 2

It looks like a problem in your webpack-dev-server config. For example, devServer.contentBase should be an absolute path :

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