How to pass imageUrl from doc data to a component in Astro.js? | Astro Lounge | Page 1

I am working on an Astro.js project and I am trying to pass the imageUrl from doc data to a MarkdownContainer component.

Here's the markdown template and it tells Astro to use "../../layouts/MarkdownContainer.astro" as layout:

---
id: d39fa1e8-412a-4672-8d7e-e7bcb6b45b95
layout: ../../layouts/MarkdownContainer.astro
title: Template
description: Template
imageUrl: ../../assets/test.jpg
date: Sep 7, 2023
datetime: "2023-09-07"
category: Blog
disable: true
---
# Hello World

The frontmatter.imageUrl is just a string and not a parsed object.
Here's the main point of my problem.
Here's the layout:

---
import { Image } from "astro:assets";
const { frontmatter } = Astro.props;
---

<Image
  width={800}
  height={450}
  format="webp"
  src={frontmatter.imageUrl}
  alt={frontmatter.title}
  class="mt-6 aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]"
  transition:name={frontmatter.id}
/>

And here's the [slug].astro:

---
import type { Code } from "astro:components";
import Layout from "../../layouts/Layout.astro";
import { type CollectionEntry, getCollection } from "astro:content";

export async function getStaticPaths() {
  const docs = await getCollection("documentation");
  return docs.map((doc) => ({
    params: { slug: doc.slug },
    props: doc,
  }));
}

type Props = CollectionEntry<"documentation">;

const doc = Astro.props;
const { Content } = await doc.render();
---
<Layout title={doc.data.title} description={doc.data.description}>
  <Content />
</Layout>

In the [slug].astro, I want to get the imageUrl from doc.data and pass it to the MarkdownContainer component. The imageUrl is an object that looks like this:

imageUrl: {
  height: number;
  src: string;
  width: number;
  format: "png" | "jpeg" | "webp" | "gif";
};

However, I'm not sure how to do this. Could anyone provide some guidance?

Thanks in advance!

#How to pass imageUrl from doc data to a component in Astro.js?