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.

How are you loading your CSS in your React app? – tgallacher May 22 '17 at 22:58 — tgallacher, May 22 '17 at 22:58
It is loaded inline by webpack – Kaiser Soze May 23 '17 at 06:49 — Kaiser Soze, May 23 '17 at 06:49

score 2 · Accepted Answer · answered May 24 '17 at 16:20

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.

score 1 · Answer 2 · answered May 23 '17 at 08:14

1

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"
},

answered May 23 '17 at 08:14

Andrea Carraro

9,731
5
33
57

webpack 2 and background images in css

2 Answers2