Use Astro getImage with Keystatic Image result

[tordans]

Goal

I am trying to pass the image that was optimized by Astro to a React component as props.

import type { Prettify } from '@shared/types/types'
import type { GetImageResult } from 'astro'
import { getImage } from 'astro:assets'
import { getCollection, type InferEntrySchema } from 'astro:content'
import { QuotesSlider } from './quotes/QuotesSlider'

const homepageQuotes = await getCollection('homepageQuotes')
type Quote = Prettify<
  Omit<InferEntrySchema<'homepageQuotes'>, 'image'> & { imageSrc: GetImageResult }
>
const quotes: Quote[] = []
for (const quote of homepageQuotes) {
  const { image, ...rest } = quote.data
  const imageSrc = await getImage(image)
  const result: Quote = { ...rest, imageSrc }
  quotes.push(result)
}

This is my collection definition

defineCollection({
  type: 'data',
  schema: ({ image }) =>
    z.object({
      quote: z.string(),
      position: z.string().optional(),
      image: image(),
      imageCopyright: z.string().optional(),
    }),
})

Error

However, I am getting this error

Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received /@fs/Users/…/frm-7-landingpage/src/content/homepageQuotes/foo/image.jpg?origWidth=2597&origHeight=3056&origFormat=jpg.
https://docs.astro.build/en/guides/images/#src-required

Docs

In https://docs.astro.build/en/guides/images/#images-in-content-collections it clearly states …

The image will be imported and transformed into metadata, allowing you to pass it as a src to <Image/>, <img>, or getImage().

?

Any idea what is going on?

[ArmandPhilippot]

We're closing stale and outdated discussion to keep only the discussions still relevant to the current project version and/or the current docs state.

I'm closing this as content collections have changed since 2024. And the discussions are intended to discuss improvements to the documentation; for any support questions, feel free to ask on our Discord server!

If you think this is a mistake and that this discussion should remain open, please feel free to ping me, I'll take a second look at it.

Thank your for your contribution!