You may need an appropriate loader to handle this file type upload image file

Question

I am using an image file in react-babel-webpack. But it showing an error that

ERROR in ./public/assets/scissors.png
Module parse failed: /home/rohit/Desktop/game/public/assets/scissors.png
Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

tool.component.js

import React from 'react';
import Paper from '../../public/assets/paper.png';
import Rock from '../../public/assets/rock.png';

class Tools extends React.Component {
  render(){
    return (
      <div>
      <img src={Paper} name="Paper" onClick={this.select.bind(this)} className="game-icon" alt="logo" />
      <img src={Rock} name="Rock" onClick={this.select.bind(this)} className="game-icon" alt="logo" />
      </div>
    );
  }
};

export default Tools;

webpack.config.dev.js

import path from 'path'
import webpack from 'webpack';

export default {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.js')
  ],
  output: {
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: [ 'react-hot', 'babel' ]
      },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [ 'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]} 
    ]
  },
  resolve: {
    extentions: [ '', '.js', '.css' ]
  }
}

Answer 1

add '.png' into the extensions array:

resolve: {
  extensions: [ '', '.js', '.css', '.png' ]
}

edit: resolved typo