Astro v3 images in frontmatter not loading

Question

I'm rebuilding my personal website in Astro, and I'm facing this issue with frontmatter in MDX files and images. Images are correctly loaded when referenced in the markdown text, but are not loaded when referenced in the frontmatter.

In one of my collections, I've got a markdown file that looks similar to this:

---
name: "bg-script"
icon: ./bgscript.png
---

![bgscript logo](./bgscript.png)

In the same folder, there's an image file with the correct name. I've setup the schema for this collection using the image helper:

const projectsCollection = defineCollection({
    schema: ({image}) => z.object({
        name: z.string(),
        icon: image()
    })
})

Then I'm using it like this in the layout (frontmatter derives from the data attribute of the CollectionItem):

    <main class="content">
        <h1>{frontmatter.name}</h1>
        <Image 
          src={frontmatter.icon} 
          alt={frontmatter.name}
        />
        <article><slot /></article>
    </main>

Now, the image within the markdown text is correctly displayed. However, the Image component in the layout, that gets the src from the frontmatter, sees frontmatter.icon as a string, and not as an ImageMetadata, even with the collection set up as the docs says...

This leads to an error showing that the icon image is treated as if it was an external resource, asking to insert a specific width and height. Even after inserting the dimensions, the image is still not loaded.

What am I doing wrong?

score 0 · Answer 1 · answered Sep 02 '23 at 22:07

This is quite embarassing, but basically it was just a problem with how I exported the collections. I exported the constant collection instead of collections (plural). Once that was done, the schema actually started to apply and check the mdx files, and the images started working fine.

Astro v3 images in frontmatter not loading

1 Answers1