Next.js Discord

Discord Forum

Public assets not loading while deploying to vercel

Answered
Wuchang bream posted this in #help-forum
Open in Discord
Wuchang breamOP
everthing works fine in dev env but after deployment to vercel static images in /public/* does not load.
Answered by Clown
Images folder has a capital I in your use case.

Try using that instead. Not 100% if this is a issue, but worth a try.
View full answer

8 Replies

Clown
Check if it works in npm run build && npm start
It should work by default in vercel unless you have changed your next config. So copy paste your next config here aswell and an example of how you are using the image's path in your code.
Wuchang breamOP
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "avatars.githubusercontent.com",
        port: "",
        pathname: "/**",
      },
    ],
  },
};

module.exports = nextConfig;
this is how i use it
   <Image
          src="/images/register-bg.jpg"
          alt="people in sitting"
          fill
          className="absolute inset-0 object-cover"
        />
@Wuchang bream this is how i use itts <Image src="/images/register-bg.jpg" alt="people in sitting" fill className="absolute inset-0 object-cover" />
Clown
Images folder has a capital I in your use case.

Try using that instead. Not 100% if this is a issue, but worth a try.
Answer
Clown
Also you probably dont need to set pathname in your config if thats your usecase
Wuchang breamOP
@Clown man really thanks , I did a typo 😬