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

Question

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" />

Research

Please follow the official documentation on how to add custom webpack config in Next.js. Moreover, it is not necessary to manually configure webpack. Just upgrade to Next.js v11 or above. You will be able to do this without any extra config. – Bamby

Thank you soo much. i just resolve this error by using this library next-images – Research

Answer 1

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>

Research

Don't forget to restart development server – Research