1

I'm saving images dynamically. Images stores in public folder of NextJS project.

Path to get image is /public/upload/catalog/{imagename}

enter image description here

As said in NextJS documentation about access to public folder, I'm trying to get this image by path /upload/catalog/{imagename}

And it's perfectly works in development env, but in production I can't access the image.

Example from code of Image component:

<Image
    src={src} //src === "/upload/catalog/1644916867663.jpg"
    width={width || '50'}
    height={height || '50'}
    objectFit={objectFit || 'cover'}
    alt='image'
/>
Evgeny Alekseev
  • 145
  • 3
  • 13
  • What does this link return on production? `"https://{YOUR_DOMAIN}/upload/catalog/1644916867663.jpg"` – hurricane Feb 15 '22 at 09:45
  • 404. This page could not be found. – Evgeny Alekseev Feb 15 '22 at 09:46
  • Have you tried to log the `src` in production to see what it output is? – Taghi Khavari Feb 15 '22 at 09:47
  • Are you able to access any of the public files in production? How do you make sure you upload those images under next.js directory? How you checked production file system and checked whether the uploaded files are present or not? – hurricane Feb 15 '22 at 10:25
  • When I added image to public and build the project, the image appeared on the page. So then I tried to delete image from public directory, but image anyway apperared on the page. I think NextJS cached public directory after build And I cant access to dynamic files with public directory – Evgeny Alekseev Feb 15 '22 at 10:38

2 Answers2

2

A bit late maybe, but I faced the same problem and after reading Next.js docs carefully it is crystal clear:

Note: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third party service like AWS S3 for persistent file storage.

Therefore using s3 may be a solution.

ivanatias
  • 3,105
  • 2
  • 14
  • 25
Ferhat Sal
  • 21
  • 5
0

I think thats because in production your base path to the folder /upload is different than your base path in development.

funprogramming
  • 1
  • 3