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.

[RPDeshaies]

Hey @Princesseuh, this looks like a great solution! I've just tried using the import.meta.env.SITE + the src, but the content of the src property doesn't look like something that can be appended to the URL.

Here's an example:

@fs/Users/my-username/Documents/GitHub/my-repo/src/content/a-folder/index.png?origWidth=630&origHeight=500&origFormat=png

I've considered trying to write logic to clean it up, but since some segments of that path are dynamic based on where the project is built (my computer vs. the CI), I'm not sure I can use the src property as is.

Do you have any other suggestions for me that could potentially make this thing work without us having to change anything in the Astro codebase?

[richwklein]

I've been banging my head against this for a couple of days now myself. I think what I'm seeing is that the src when in dev mode is what gets sent to the image service, but in static builds it is the path to the image. The problem is the inconsistency between the two modes. Could the src while in local dev mode match behavior and be the actual path needed to render the image? something like:

_image?href=@fs/...

with that change concatenating the values together to get an absolute url should be rather straight forward without having to resort to checking the mode environment variable.

[Princesseuh]

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