5

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" />
Muhammad Faiz
  • 119
  • 1
  • 2
  • 9
  • 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. – brc-dd Jun 17 '21 at 10:27
  • 1
    Thank you soo much. i just resolve this error by using this library [next-images](https://www.npmjs.com/package/next-images) – Muhammad Faiz Jun 17 '21 at 22:08

1 Answers1

5

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>
Muhammad Faiz
  • 119
  • 1
  • 2
  • 9