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

Laszlo · Accepted Answer · 2020-03-22T12:14:07.133

3

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

edited Mar 22 '20 at 12:14

answered Mar 22 '20 at 11:59

Laszlo

2,225
19
22

2

I am using it like that (added the info in the question). However, still: It's finding it only locally. Once I deploy, the images are not shown. – Remi Mar 22 '20 at 12:03
I see now. The public folder has to be in the root. There’s no way to configure otherwise. I’ve updated my answer. – Laszlo Mar 22 '20 at 12:09
In the root meaning at the same level as ./src? But then my localhost does not find the images. – Remi Mar 22 '20 at 12:23
Yes, same level as src and pages. When you run next in dev (npm dev) do you get the image under http://localhost:9000/images/my-image.jpg? Did you restart the server after changing the folder structure? – Laszlo Mar 22 '20 at 14:15
Aha, could it be that the src folder in combination with .next and .now folders should be in a specific structure? I've added the full folder structure to elaborate. – Remi Mar 22 '20 at 14:41
I don't think this structure going to work properly, it explains why you experience inconsistency between the dev and production builds. Your page, public and next.config.js has to be on the root level. All other components can live in src. – Laszlo Mar 22 '20 at 20:23
6

I have my public folder in the root, but I encountered the same issues as well. Do you manage to fix it @Remi – Sam Kah Chiin Jan 14 '21 at 08:12

Chris Nguyen · Answer 2 · 2021-01-27T01:55:19.383

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.

edited Jan 27 '21 at 01:55

answered Jan 22 '21 at 02:23

Chris Nguyen

2,327
1
16
13

1

Please paste the code here. No images of code please. Also please read this: – Sabito stands with Ukraine Jan 22 '21 at 07:24
A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](/help/deleted-answers) – Sabito stands with Ukraine Jan 22 '21 at 07:25

score 2 · Answer 3 · answered Sep 20 '21 at 03:42

2

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.

answered Sep 20 '21 at 03:42

umess

31
4

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

Edit:

3 Answers3

Linked