Next.js Discord

Discord Forum

INVALID_IMAGE_OPTIMIZE_REQUEST

Unanswered
style posted this in #help-forum
Open in Discord
Avatar
https://egg-catering.vercel.app/en

https://egg-catering.vercel.app/_next/image?url=%2Fapi%2Fmedia%2Ffile%2Fabb1684319a9fa692243ce0c405b6331Expires%3D1734307200%26Key-Pair-Id%3DAPKAQ4GOSFWCVNEHN3O4%26Signature%3DiHkRYJvMmBWZdhYAVAtZxayD-~nr0QoD-rOn5oW-RtDEFhp0vsYQPDAbV5QwCpViwzxxPDN706IaF00VG838D4tDSBINxyU6t9b28-hFauEzxfjP4dFDBI0CJ~hqYAjTWoGo~kLHrQCsZqfqKH5KhE9jPGavtPEU&w=384&q=75

Why am i getting this error? It works fine on localhost, but on vercel it does not.

I use payload CMS to fetch media url FYI.

const cardsDataRaw = (await payload.find({
        collection: 'about-card',
        locale: locale,
        fallbackLocale: 'pl'
    })).docs;

    const cardsData: CardData[] = cardsDataRaw.sort((a, b) => a.id - b.id).map(value => ({
        tab: {
            title: value.tabTitle
        },
        data: {
            title: value.title,
            tag: value.tag,
            content: value.content,
            imageUrl: typeof value.imageUrl === 'object' ? value.imageUrl.url : value.imageUrl
        }
    } as CardData));


<Image
                src={imageUrl}
                alt={`${title} image`}
                height={256}
                width={320}
                data-loaded='false' 
                onLoad={(event)=> event.currentTarget.setAttribute('data-loaded', 'true')}
                className="data-[loaded=false]:animate-pulse data-[loaded=false]:bg-gray-100/10 w-full sm:w-[320px] h-[256px] sm:h-full object-cover rounded-t-lg sm:rounded-none"
            />

0 Replies