58

I am making a React w/ Webpack setup and am struggling to do what seems like should be a simple task. I want webpack to include images, and minimize them like I with gulp but I can't figure it out. I just want to be able to link an image in my css like so:

/* ./src/img/background.jpg */

body { background: url('./img/background.jpg'); }

I have all of my css/js/img folders inside a src folder. Webpack outputs to a dist folder, but I can't figure out how to get images there.

Here is my webpack setup:

 var path = require('path');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
  devtool: 'cheap-eval-source-map',
  entry: [
   'webpack-dev-server/client?http://localhost:8080',
   'webpack/hot/dev-server',
   './src/index.js'
  ],
  output: {
  path: path.join(__dirname, 'dist'),
  //  publicPath: './dist',
  filename: 'bundle.js'
  },
  plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new HtmlWebpackPlugin({
  template: './src/index.html'
   })
  ],
  module: {
  loaders: [{
   exclude: /node_modules/,
   test: /\.js?$/,
   loader: 'babel'
   }, {
  test: /\.scss$/,
  loader: 'style!css!sass'
    }, {
  test: /\.(png|jpg)$/,
  loader: 'file-loader'
  }]
 },

 devServer: {
  historyApiFallback: true,
  contentBase: './dist',
  hot: true
  }
};

3 Answers 3

89

I was stuck with similar issue and found that you can use url-loader to resolve "url()" statements in your CSS as any other require or import statements.

To install it:

npm install url-loader --save-dev

It will install the loader that can convert resolved paths as BASE64 strings.

In your webpack config file use url-loader in loaders

{
  test: /\.(png|jpg)$/,
  loader: 'url-loader'
}

Also make sure that you are specifying your public path correctly and path of images you are trying to load.

13
  • 3
    Well my webpack-dev server serves from /dist and my images are in /src so do you know how I would reference the images in my .css file? Are the images supposed to be rolled up with my bundle.js? I'm just not sure how to get them to /dist since the /dist folder is just a virtual one served from webpack-dev-server Commented Feb 12, 2016 at 20:06
  • 4
    @user3737841 You should be able to require the images in your stylesheets. For example, background-image: url('../assets/img/logo-dark.png'). You will just have to try/adjust to get the path correct. Commented Feb 13, 2016 at 7:45
  • 1
    Is it possible to achieve the same end result without inlining images? Ideally, images should just be copied to the dist folder preserving the same relative path. Is this possible? Commented Apr 26, 2016 at 2:34
  • 1
    @VariableContent yes, just use file-loader. Images will be copied into output folder.
    – Skay
    Commented Aug 18, 2016 at 18:29
  • 4
    @VariableContent btw url-loader has an option limit and if the image is larger than limit it will resolve it to url rather than base64 string
    – SMSk
    Commented Apr 17, 2017 at 14:20
0

using background-image: url('./img/background.jpg') in the scss file worked for me, without url-loader. Only had file-loader for .png|.jpg|... etc.

1
  • 1
    The OP specifically explained that this doesn't work for them
    – GalAbra
    Commented Aug 8, 2021 at 5:42
0

In case you came here from Google and file-loader nor url-loader is not working for your version of webpack (5.x), here is simple way how to do it answered by @SomoKRoceS: https://stackoverflow.com/a/69906036/3356230

{
  test: /\.(jpg|png|svg|gif)$/,
  type: 'asset/resource',
},

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.