Using images with webpack react wont work

Question

I have a project that uses webpack and react. I use the file-loader / url-loader to use images with the webpack/react setup. In my react project I do import Img from '/image/source/image.jpg' but if then try <img src={Img}> the src is a base64 code that is saying module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg"; and no image is showing. How can I fix this?

webpack.config.js

var webpack = require( 'webpack' )
var path = require( 'path' )

var BUILD_DIR = path.resolve( __dirname, 'src/client/public' );
var APP_DIR = path.resolve( __dirname, 'src/client/App' );

var config = {
  mode : 'development',
  entry : APP_DIR + '/index.jsx',
  output : {
    path : BUILD_DIR,
    filename : 'bundle.js'
  },

  devServer : {
    publicPath : '/',
    contentBase : './src/client'
  },

  module : {
    rules : [
      {
        test : /\.jsx|js?/,
        include : APP_DIR,
        exclude : /(node_modules)/,
        loader : 'babel-loader',
        query : {
          presets : [ 'env', 'react' ]
        }
      },

      {
        test : /\.scss|.css$/,
        loaders : [ 'style-loader', 'css-loader', 'sass-loader' ]
      },

      {
        test : /\.(png|jp(e*)g|svg)$/,
        use : [{
          loader : 'url-loader',
          options : {
            limit : 8000,
            name : 'images/[hash]-[name].[ext]'
          }
        }]
      },

      {
        test : /\.(png|jp(e*)g|svg)$/,
        use : {
          loader: "file-loader",
          options: {
            name: "images/[name].[hash].[ext]"
          }
        }
      }
    ]
  }
};

module.exports = config;

It is something you need to work out with your public-path and file-loader export name in Webpack config. You should show us the Webpack configuration you are using now. — Up209d
@RickGrendel Hey bro, why your dev-server have contentBase of src/client, it is supposed to serve assets from your BUILD_DIR since all of your assets processed by Webpack file loaders will be delivered there. — Up209d

Roy Scheffers Roy Scheffers · Accepted Answer · 2018-07-22T10:08:33

I suggest removing the file-loader in your webpack.config.js and only use the url-loader as both plugins work similarly. To my understanding, Webpack processes your images files now using both loaders as you specify for both loaders to be triggered by the following.
test : /\.(png|jp(e*)g|svg)$/,

As images run through both loaders, this is likely why you see module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg"; for your image source.

Here's what the webpack docs say about the url-loader.

url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.

Besides that you instruct webpack to use a different file names for the same file extensions which might also create an issue.
url-loader > name : 'images/[hash]-[name].[ext]'
file-loader > name: "images/[name].[hash].[ext]"

I've uploaded this GitHub repo that you can check out. It loads images as you suggest. Adjust the limit setting of the url-loader and check the source to see the url change from a base64 encoded image to an URL.

Using images with webpack react wont work

webpack.config.js

1 Answers