CODEWITHSUNDEEP
node.jsreactjswebpack
Murtuza Z
Murtuza Z

Reputation: 6017

PNG do not load when using webpack

I am new to webpack.

PNG files are failed to load in my project, Some of the SlickGrid plugin uses url() function to load PNG files as given below,

enter image description here

But I'm getting following error on my browser console, enter image description here

Here is my webpack file,

/* eslint-env node */

module.exports = {
  context: __dirname + '/xyz/static',
  entry: {
    reactComponents: './bundle/components.js',
    history: './js/history/index.js',
    slickgrid: './bundle/slickgrid.js',
  },
  output: {
    libraryTarget: 'amd',
    path: __dirname + '/xyz/static/js/generated',
    filename: '[name].js',
  },

  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: [/node_modules/, /vendor/],
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react'],
        },
      },
    }, {
      test: /\.css$/,
      use: ['style-loader', 'raw-loader'],
    }],
  },

  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Please let me know what I'm missing here.

Upvotes: 0

Views: 847

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

You need to make use of a url-loader in your webpack config to load images like

 module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: [/node_modules/, /vendor/],
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react'],
        },
      },
    }, {
      test: /\.css$/,
      use: ['style-loader', 'raw-loader'],
    },{
            test: /\.(jpe?g|png|gif|svg)$/,
            use:['url-loader']
        }],
  }

and then in your code you can import images like

import img from 'path/to/image.png';

and use it as a source in the image tag like

<img src={img} />

Upvotes: 1

Related Questions