Images from Supabase storage result in INVALID_IMAGE_OPTIMIZE_REQUEST

Help
1

Hello everyone,

I am trying to display images hosted in a public bucket on Supabase in my NextJS app hosted on Vercel. I use an <Image> component for this and configured my next.config.ts like this:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  // ... other stuff
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: process.env.NEXT_PUBLIC_SUPABASE_URL!,
      },
    ],
  },
} 

export default nextConfig

The referenced ENV variable is set in my project and managed by the official Supabase integration.
In the live deployment’s dev console in the browser I can see the request for the image failing with a 400 error code when trying to fetch the image from a link like this:

https://<project-url>.vercel.app/_next/image?url=https://<project-id>.supabase.co/storage/v1/object/public/thumbnails/<filename>.jpg&w=1080&q=75

I verified that I can view the link set for the url parameter directly - this works just fine.

What am I missing here? Do I need to configure remotePatterns differently? Can I not use ENV variables there?

Thx in advance,
Daniel

2

I fixed it. I forgot that the ENV variable would start with https:// as well, so I have to strip the start in order for the hostname to actually contain nothing but the hostname.

2 Likes
3

Thanks for coming back with a solution, Daniel!

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.