#Importing image using image() schema helper not working? Can't import .src into <Image> element

25 messages · Page 1 of 1 (latest)

silk tundra
#

Imported local image is not being imported?
Hey everyone, I'm having trouble using the <Image> component from Astro when it is getting imported from a markdown file through the image() schema helper. I want to use a image from the frontmatter of a .md file in the layout.astro file. The src keeps on giving me errors, even though the image IS being imported just like described.
I have attached the error and the line that's giving me trouble + wrote the code below (omitted the lines which should not matter at all)

In my markdown (.md) file:

cover: "./unit.png"
---```

**My Layout.astro file:**
```---
import BaseLayout from "./BaseLayout.astro";
import type { CollectionEntry } from "astro:content";
import { Image } from "astro:assets";
import TableOfContentsList from "../components/TableOfContents/TableOfContentsList.astro";
import { generateToC } from "../components/TableOfContents/generateToC";

interface Props {
    post: CollectionEntry<"chapters">;
}
const { post } = Astro.props;
const { headings } = await post.render();
const { remarkPluginFrontmatter } = await post.render();
---

<BaseLayout title={post.data.title}>
  <div class="center-container">
    <Image
    src={post.data.cover.src}
    alt={post.data.coverAlt}
    class="cover-image"
    width={1600}
    height={900}
    />
  </div>
</BaseLayout>```

**My config.ts:**
```const chapterCollection = defineCollection({
    type: 'content',
    schema: ({ image }) => z.object({
        title: z.string(),
        cover: image()
            .refine((img) => img.width = 1600, {
                message: "Cover image must be 1600 pixel wide!",
            })
            .refine((img) => img.height = 900, {
                message: "Cover image must be 900 pixel high!",
            }),
        coverAlt: z.string(),
    })
});```
image.png
#

My [..slug].astro:

import { getCollection } from "astro:content";

export async function getStaticPaths() {
    const blogEntries = await getCollection("chapters");
    return blogEntries.map((entry) => ({
        params: { slug: entry.slug },
        props: { entry },
    }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
import PostLayout from "../../layouts/PostLayout.astro";
---

<PostLayout post={entry}>
    <Content />
</PostLayout>```


If I replace the <Image> with a normal <img> everything works perfectly as expected. What is the mistake here? Or is this a bug / is the error message wrong?
image.png
urban trellis
#

src={post.data.cover.src} should be src={post.data.cover}

silk tundra
#

@urban trellis That sadly does also not work, I get this error then.

image.png
#

The screenshot above had the <img> element, this now has the <Image> one.
I can force a string with src={post.data.cover as string}

image.png
urban trellis
#

I was going by your initial post

#

Where you were using Image

silk tundra
#

That is what I want to use, yes, sorry if that was unclear

urban trellis
#

Image's src should be an ImageMetadata, so it should be post.data.cover

silk tundra
urban trellis
#

You don't need the as string for Image

silk tundra
urban trellis
#

Oh, that's weird

silk tundra
#

I moved the Image thing a bit to the left, might be easier to see this way

image.png
urban trellis
#

Not sure what's happening, you should cast to ImageMetadata though if you're gonna cast

#

Is this on the latest version of Astro?

silk tundra
#

That is what I am doing? At least that's what I think I am doing haha

#

Yes just updated today

#

Ahh, like this?

image.png
urban trellis
#

Yeah

silk tundra
#

Both seems to work

urban trellis
#

I'll take a look as to why it's not working normally, it's definitely supposed to, ha

silk tundra
urban trellis
#

I'm planning to learn Korean in the future, so I must fix this otherwise I won't be able to 😰

silk tundra
#

That would be great 😁 hahaha