ImageNotFound error in content collection item when using image().or(z.string())

[FjellOverflow]

Astro Info

Astro                    v5.0.3
Node                     v22.9.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/mdx
                         @astrojs/sitemap

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

Describe the Bug

When using image().or(z.string()) in a content collection definition, Astro will always throw a ImageNotFound error, when a bare string is given instead of a local asset.

We can define

defineCollection({
  loader: glob({ pattern: '**/[^_]*.md', base: './content/example' }),
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      previewImage: image().or(z.string())
    })
})

and set previewImage to reference some asset in the public directory to skip Astros image optimization.

---
title: Example
previewImage: '/example.png'
---
Example

Now we'll always get [ERROR] [ImageNotFound] Could not find requested image '/example.png'. Does it exist?

What's the expected result?

In Astro version 4.x.y I could use image().or(z.string()) to allow both referencing local assets, optimized by Astro and a bare string to give some public or external image url.

In Astro version 5, it will always expect an existing image and throw error if a mere string is given.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-2q7gtw-wnxkkr?file=src%2Fcontent.config.ts

Participation

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

[bentoh-root]

Running into issues with the image helper as well. Previously I was using the image helper using the following schema:

const postCollection = defineCollection({
     type: 'content',
     schema: ({ image }) => z.object({
         draft: z.boolean({required_error: "draft is required"}),
         title: z.string({required_error: "title is required"}),
         author: z.string({required_error: "author is required"}),
         pubDate: z.date({required_error: "pubDate is required"}),
         description: z.string(),
         cover: image().refine((img) => img.width >= 1080, {
             message: "Cover image must be at least 1080 pixels wide!",
         }),
         coverAlt: z.string(),
         tags: z.array(z.string()),
     }).strict(),
});

This collection would take the cover frontmatter attribute (which is a relative path to an image under src/images) and automatically create an Image objects correctly to render a thumbnail image using a Picture.

<Picture class="aspect-[4/4] object-cover grayscale group-hover:scale-110 group-hover:filter-none transition-transform duration-500"
             src={cover}
             alt={coverAlt}
             densities={[1.5, 2]}
             formats={['avif', 'webp']}
             fallbackFormat="webp"
             loading="eager"
             fetchpriority="high"
      />

Now, with Astro 5.1.1, I get the following error:

[LocalImageUsedWrongly] Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received ../../images/image_name.jpg

Was using Astro 4.16.7 previously.

[ascorbic]

@bentoh-root image().refine() isn't supported in Astro 5, because the image data isn't available at parsing time

[ascorbic]

In an earlier version of the content layer beta we did treat path with an initial slash as public paths, but this was reported as a change from previous behaviour. See #12025. For that reason we switched it to match the previous handling (see #11858). If you want it to be treated as an external image you can change it to an absolute URL. Not ideal I know, but this is apparently what it did before. I'm going to close this as working as expected.