Vercel OG

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

13 Replies

Unknown User•13mo ago

Message Not Public

biganshOP•13mo 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

Unknown User•13mo ago

Message Not Public

biganshOP•13mo ago

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

Unknown User•13mo ago

Message Not Public

biganshOP•13mo 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,
        }
    )
}

Unknown User•13mo ago

Message Not Public

biganshOP•13mo 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•13mo 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

Unknown User•13mo ago

Message Not Public

biganshOP•13mo ago

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

Unknown User•13mo ago

Message Not Public

biganshOP•13mo ago

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

Gaming

Programming

Vercel OG