Nextjs, Images in public folder not found on deploy, but are found locally

Question

When I'm developing locally the images are found when I place the /public folder in /src/:

# locally
./src/public/images/

Then when I do a deploy the images are not found. But when I place the public folder outside of src the images are found:

# deploy
./public/images/
./src/

And I use the images as:

<img src="/images/my-image.jpg" alt="" />

Is there a configuration setting I have to use?

---

Edit:

Full structure:

|- .now/
|  |-  project.json
|  └── README.txt  
|- next.config.js
|- now.json
|- src/
|  |- .next/
|  |  |-  build-manifest.json
|  |  |-  react-loadable-manifest.json
|  |  |-  cache/
|  |  |-  server/
|  |  └── static/
|  |-  pages/
|  └── next-env.d.ts

Answer 1

The public folder has to be in the root. There’s no way to configure otherwise.

Files inside public can then be referenced by your code starting from the base URL (/). /public/path/image.jpg is served as /path/image.jpg

https://nextjs.org/docs/basic-features/static-file-serving

Answer 2

Next.js can serve static files, like images, under a folder called public in the root directory. You can check the document here

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

Have fun.

Answer 3

You might have problem with letter case like .png and .PNG. You have to use the same case in code as in the image extension case.