Vercel OG

methods allowed, GET. allowed domains, our domains & localhost ports. we added vercel og playground domain as well

17 Replies

Sid•2y ago

Can you paste in your CORS config here?

biganshOP•2y ago

sure we removed the og playground for security.

  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "http://localhost:5000",
      "https://testing.bloks.social"
    ],
    "AllowedMethods": [
      "GET"
    ]
  }
]

  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "http://localhost:5000",
      "https://testing.bloks.social"
    ],
    "AllowedMethods": [
      "GET"
    ]
  }
]

it wasnt working when we tried doing via the script on localhost

Sid•2y ago

But the OG playground Origin isn’t on here

Sid•2y ago

You’ll want to add https://og-playground.vercel.app to the origins

Vercel OG Image Playground

Generate Open Graph images with Vercel’s Edge Function.

Sid•2y ago

Does your script generate the image in a browser?

biganshOP•2y ago

no. that's what i said we added it previously. but removed it later @Sid | R2

Sid•2y ago

Can you share your script? Or what kind of error you see? Or a link to your image? I can’t imagine why an image would fail to load like this

biganshOP•2y ago

this is our code

import { ImageResponse } from '@vercel/og'

export const runtime = 'edge'

export async function GET(request) {
    const { searchParams } = new URL(request.url)
    const title = searchParams.get('title')
    const description = searchParams.get('description')

    return new ImageResponse(
        (
            <div tw='flex flex-col w-full h-full items-center justify-center bg-white'>
                <img
                    alt='Vercel'
                    height={1000}
                    src='https://cdn-testing.bloks.social/testing/23d756f6-c169-49b9-95b5-44f5affa708e_Banner.png'
                    width={400}
                />
                <h3 tw='text-blue-800 absolute bottom-1 right-10'>
                    bloks.social
                </h3>
                <div tw='flex flex-col items-start'>
                    <h1>{title}</h1>
                    <h2 tw='font-medium -mt-2'>{description}</h2>
                </div>
            </div>
        ),
        {
            width: 1000,
            height: 550,
        }
    )
}

import { ImageResponse } from '@vercel/og'

export const runtime = 'edge'

export async function GET(request) {
    const { searchParams } = new URL(request.url)
    const title = searchParams.get('title')
    const description = searchParams.get('description')

    return new ImageResponse(
        (
            <div tw='flex flex-col w-full h-full items-center justify-center bg-white'>
                <img
                    alt='Vercel'
                    height={1000}
                    src='https://cdn-testing.bloks.social/testing/23d756f6-c169-49b9-95b5-44f5affa708e_Banner.png'
                    width={400}
                />
                <h3 tw='text-blue-800 absolute bottom-1 right-10'>
                    bloks.social
                </h3>
                <div tw='flex flex-col items-start'>
                    <h1>{title}</h1>
                    <h2 tw='font-medium -mt-2'>{description}</h2>
                </div>
            </div>
        ),
        {
            width: 1000,
            height: 550,
        }
    )
}

Sid•2y ago

I believe @vercel/og uses Satori under the hood which does not support WebP images, which is what your image is encoded as I've got a personal OG setup and that's what Satori fails with

Sid•2y ago

https://github.com/vercel/satori/issues/273

GitHub

Support webp images · Issue #273 · vercel/satori

Feature Request Allow webp images to be rendered

Sid•2y ago

If you re-encode your image as a PNG, things should work. For some reason your image has the PNG extension but is actually a webp

biganshOP•2y ago

got it but this image we uploaded is a png. is showed me its mime type as png cc: @kartik_k12 it is working with other buckets it that cloudflare is converting the type

Kartik•2y ago

The bucket is returning in PNG format and the same image uploaded on supabase bucket works fine even when we download image the format is PNG

Sid•2y ago

Do you have webP optimization turned on in your zone? I downloaded the same image and I showed you a screenshot of the file’s header, so clearly something is converting it on-the-fly if you’re sure you uploaded a PNG Try using the original image as well, without fetching it via Cloudflare (so a local path or something) Another thing you could try is using the r2.dev URL. Don’t use it indefinitely since it is rate-limited, but it’ll help separate the problem from your zone. You’ll find this under your zone > Speed > Optimization > Image Optimization > Image Resizing BTW

biganshOP•2y ago

checking it out sorry for a late reply we have image optimizations disabled

Sid•2y ago

Well in that case I’m not sure if that is a PNG image because R2 on its own does not modify your file, and the file I downloaded using your link is a WebP. This isn’t an R2 issue, Satori just doesn’t support that format. Have you tried using your R2.dev URL? If it really is a PNG image, that should work. R2.dev is a separate zone, so if it does work, it definitely points to something misconfigured on your domain. I’m not entirely sure how Supabase is able to work if you were also serving that same image from your zone. If Supabase uses their own domain, then that too would indicate something on your zone that is transforming that image on the fly. To be clear: the issue is that your zone is serving a WebP image (even if you’re sure you uploaded a PNG). That’s the issue here because Satori does not support it. That’s what you should look into. You need to separate your zone from your image to figure out which one is the source of the WebP

biganshOP•2y ago

we figured this out vercel was using cached images that were converted to webp we have disabled it

Gaming

Programming

Vercel OG

Did you find this page helpful?