remote image in frontmatter

[ancient karma]

Hi, Is it possible to use a remote image in frontmatter?

config.ts:

import { defineCollection, z } from "astro:content";

const imagePosts = defineCollection({
    schema: ({image}) => z.object({
        title: z.string(),
        date: z.date(),
        image: z.object({
            src: image(),
            alt: z.string(),
        }),
    }),
})

export const collections = {imagePosts}

post.md

---
title: Fake title
date: 2024-02-01
image: 
    src: https://media.4-paws.org/9/c/9/7/9c97c38666efa11b79d94619cc1db56e8c43d430/Molly_006-2829x1886-2726x1886-1920x1328.jpg
    alt: "Katie"

---

Hi from *Markdown*

Gettig this error
imagePosts → image.md frontmatter does not match collection schema.
Image https://media.4-paws.org/9/c/9/7/9c97c38666efa11b79d94619cc1db56e8c43d430/Molly_006-2829x1886-2726x1886-1920x1328.jpg does not exist. Is the path correct?

[restive ibex]

Hi @ancient karma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes, it is possible to use a remote image in the frontmatter of your markdown files. However, the error you're encountering is likely due to the way you're validating the image in your config.ts file.

In Astro v3.0, the image export from astro:content has been removed and is no longer available for use in your content collections schemas. Instead, you should validate images through the image helper from schema.

Here's how you can modify your config.ts file:

import { defineCollection, z } from "astro:content";

const imagePosts = defineCollection({
    schema: ({image}) => z.object({
        title: z.string(),
        date: z.date(),
        image: z.object({
            src: z.string(),
            alt: z.string(),
        }),
    }),
})

export const collections = {imagePosts}

In this updated schema, the src property of the image object is validated as a string, which can accommodate both local and remote image paths.

Remember, Astro cannot validate the existence of a remote image, so ensure the URL is correct and accessible. If you continue to encounter issues, it might be due to the Astro's image handling. Astro's built-in image handling is primarily designed for local images, and while it can handle remote images, it may not work in all scenarios.

For more information, refer to the Astro documentation on images (https://docs.astro.build/en/guides/images/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: