Nextjs: Unable to load images from static folder

Another way I find out Next Images

installation: npm install --save next-images

or yarn add next-images

Usage:

Create a next.config.js in your project

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

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

And in your components or pages simply import your images:

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

or

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

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

The static directory has been deprecated. Place files in public/static directory

From Next.js v11 onwards, one can now directly import images without any additional config or dependencies. Official example (comment mine):

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src={profilePic} alt="Picture of the author" />
      {/* <img src={profilePic.src} alt="Picture of the author" /> */}
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

Docs: next/image

from the docs:

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

So, first add an image to public/my-image.png and then you can reference it:

<img src="/my-image.png" />

I think next.js will have a watch on this directory so you won't need to restart your server every time you put something in there.