Next.js: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

I am getting following error while loading image from local directory in my Next.js application

Failed to compile ./pages/components/image.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

I installed this loader

$ npm install file-loader --save-dev

My webpack.config.js

module.exports = {
module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
        },
      ],
    },
  ],
},

};

My next.js code

import homeBG from './image.png'
<Image src={homeBG} alt="Picture of the author" />

I just resolve this error by using this package next-images

npm install --save next-images

OR

yarn add next-images

Create a next.config.js in your project

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

And in your components or pages simply import your images:

import img from './my-image.jpg'

export default () => <div>
  <img src={img} />
</div>

OR

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>