Hello!

I have an image i'm pulling down from supabase, https://depykmhlmsktmyapwiwa.supabase.co/storage/v1/object/public/avatars/ccdcb107-b2d6-46b5-b40d-5a39075c5a8d-0.39153040812929785.png.

That is the exact string for my demo image and i'm passing that to the Next Image component.

<Image alt={name} height={largeAvatarSize} src={avatarUrl} width={largeAvatarSize} />

My next config looks like this:

images: {
    domains: ['**.supabase.co'],
    remotePatterns: [
      {
        hostname: '**.supabase.co',
        pathname: '/storage/**',
        port: '',
        protocol: 'https',
      },
    ],
  },

but i'm getting the error once deployed to Vercel

502 bad gateway nextjs image vercel

however i don't get that error locally, i have tried installing sharp but that didn't do anything. the output seen in the actual image tag isn't the source url but instead gets converted to this

<img alt="Not Bobby" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" style="color:transparent" srcset="/_next/image?url=https%3A%2F%2Fdepykmhlmsktmyapwiwa.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Favatars%2Fccdcb107-b2d6-46b5-b40d-5a39075c5a8d-0.39153040812929785.png&amp;w=48&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fdepykmhlmsktmyapwiwa.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Favatars%2Fccdcb107-b2d6-46b5-b40d-5a39075c5a8d-0.39153040812929785.png&amp;w=96&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Fdepykmhlmsktmyapwiwa.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Favatars%2Fccdcb107-b2d6-46b5-b40d-5a39075c5a8d-0.39153040812929785.png&amp;w=96&amp;q=75">

the output of the img html and sources seems to be the same locally and once deployed to vercel but vercel (chrome) throws the error, i dont get the error locally