Image component doesn't recognize local images in the new Content Layer API

[frenicohansen]

Astro Info

Astro                    v5.0.0-beta.1
Node                     v20.9.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap

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

No response

Describe the Bug

After migrating to the new Content Layer API, the Image component is no longer able to recognize local images when the source is provided by a content collection. This is causing issues as the component now requires manual setting of image dimensions, which should not be necessary by default.

https://docs.astro.build/en/guides/images/#images-in-content-collections

What's the expected result?

Image component shouldn't ask for dimensions of local images

Link to Minimal Reproducible Example

https://codesandbox.io/p/devbox/z22xn5

Participation

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

[i-bsd]

Thanks for posting this issue. I wasted hours on this yesterday thinking I did something wrong.

[jurajkapsz]

I can confirm this.

The schema image() ImageFunction no longer returns an image object with src, width etc. properties but only a resolved string representing src/ relative path to the image file.

const myCollection = defineCollection({
  loader: glob({
    pattern: "**/*.mdx",
    base: "./src/data/collection",
  }),
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      image: image(), // <-- this
    }),
});

Astro                    v4.15.7
Node                     v20.11.1
System                   Linux (x64)
Package Manager          pnpm
Output                   hybrid
Adapter                  @astrojs/node
Integrations             @astrojs/mdx
                         @astrojs/sitemap

[Princesseuh]

This seems to be caused by the path being absolute, modifying the reproduction to use a relative path makes it work

[i-bsd]

For me, it's dynamically importing images that doesn't work at all now after upgrading (using this recipe). Never had an issue before.

[Princesseuh]

For me, it's dynamically importing images that doesn't work at all now after upgrading (using this recipe). Never had an issue before.

That seems unrelated, this issue is specifically about the image() schema.

[jurajkapsz]

This seems to be caused by the path being absolute, modifying the reproduction to use a relative path makes it work

Yes, I use absolute paths for linked images eg /src/assets/images/perex/image.jpg. I actually can't imagine to use relative paths. I'd like to say that switching to absolute paths resolved my project's maintainability.

[Princesseuh]

Fixed by https://github.com/withastro/astro/pull/12030