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


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

# locally

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

And I use the images as:

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

Is there a configuration setting I have to use?


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

Related Question