Include an image's absolute URL in the ImageMetaData when images are processed in Content Collections to allow @vercel/og to render Astro's images

Astro Info

✅ I am using the latest version of Astro and all plugins.
✅ I am using a version of Node that Astro supports (v18.17.1 or v20.3.0 or higher.)

Astro                    v4.11.1
Node                     v20.12.0
System                   macOS (arm64)
Package Manager          bun
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/starlight
                         @astrojs/react
                         @astrojs/tailwind
                         @astrojs/mdx

If this issue only occurs in one browser, which browser is a problem?

N/A

Describe the Bug

Once processed by Astro, Images in Content Collection have the following form.

type ImageMetaData = {
    src: string;
    width: number;
    height: number;
    format: "png" | "jpg" | "jpeg" | "tiff" | "webp" | "gif" | "svg" | "avif";
}

Which is perfect for when images are rendered in the app itself.

In my application, I'm using the @vercel/og package to generate open graph social media images for pages of the site using Astro Endpoints. The issue is that if I try to render a normal <img/> tag and use the image.src I get the following error from @vercel/og

Image source must be an absolute URL: /@fs/Users/.../src/content/.../index.png?origWidth=1260&origHeight=1000&origFormat=png

What's the expected result?

I know this is a very specific issue with Vercel OG but since Astro doesn't provide a baked in way of generating such images, I was wondering if it would be possible to include the raw and absolute URL of the source image in the ImageMetaData so that it could be used in such scenarios.

I included a Stackblitz below where the /og.png Endpoint works if you comment out the <img/> tag but crashes if you don't.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-vyt8ws?file=src%2Fpages%2F_renderOgImage.tsx

Participation

[ ] I am willing to submit a pull request for this issue.

withastro / roadmap