CODEWITHSUNDEEP
next.jsvercel
Remi
Remi

Reputation: 5357

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
./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

Upvotes: 7

Views: 34559

Answers (4)

Ryan
Ryan

Reputation: 24019

I added these to my next.config.js:

  output: 'export',
  distDir: 'out',

See https://nextjs.org/docs/pages/building-your-application/deploying/static-exports.

And in Netlify environment variables, I set NETLIFY_NEXT_PLUGIN_SKIP=true.

https://docs.netlify.com/configure-builds/environment-variables/

But the main step that was important for me:

Somehow my .gitignore was blocking certain images from being committed to the repo. So the image files existed locally but never got pushed to GitHub and therefore never got deployed to Netlify!

Upvotes: 1

umess
umess

Reputation: 31

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.

Upvotes: 2

Chris Nguyen
Chris Nguyen

Reputation: 2902

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.

Upvotes: 3

Laszlo
Laszlo

Reputation: 2315

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

Upvotes: 5

Related Questions