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

next.jsvercel

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

Best Solution

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

Related Question