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

[RPDeshaies]

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.

[Princesseuh]

Hello! You can get a full absolute path fairly easily by using import.meta.env.SITE or Astro.site + the src property. Since this is fairly niche use case, I think it's unlikely we would add it ourselves, but I'll migrate this issue to a discussion so that users can upvote the request and see if there's interest.

[Princesseuh]

The src in local dev mode is a path you can render, Vite serves it directly

[tombennet]

I'm struggling with this as well. I'm not using @vercel/og, instead I'm using Satori directly to create Open Graph images for my pre-rendered (static) Astro site. So all my OG images need to be fully rendered at build time.

Each post references its 'cover' image in the MDX content collection frontmatter (with the images stored in src). These cover images are used in the OG image template. I'm able to fetch each image using getImage(), but the Satori package requires a full absolute URL. On a local dev server, I'm able to get this with ${import.meta.env.SITE}${postImage.src}, where SITE is set to http://localhost:4321. But when running a build to prerender my site, I don't know what hostname to use.

Any suggestions @Princesseuh? Thanks for the help!

[tombennet]

In case anyone else encounters this issue, I got around it by checking if import.meta.env.MODE === "production", and if so I fetch my image with path.join(process.cwd(),"dist",post.data.ogImage.src), where ogImage is a frontmatter property containing a relative path to my image. I can then encode it as a base64 string to use in Satori.

[nemanjam]

I get this now. Even when I pass hardcoded https://some-site.com/some-image.png I get this:

"Image source must be an absolute URL:"

It comes from some child dependency of Astro, maybe esbuid or rollup, I have no idea. It works only with older yarn.lock file and yarn install --frozen-lockfile. I hope faulty package gets fixed.

[Cryszon]

I implemented static Open Graph images by using a combination of getImage() and Astro.url:

import staticOgImageSource from "../../assets/staticOgImage.avif";
import { getImage } from "astro:assets";

const imageUrl = new URL(
  (await getImage({ src: staticOgImageSource, format: "png" })).src,
  Astro.url,
).href;