withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
45.3k stars 2.37k forks source link

Relative image syntax does not work with Markdoc custom image node #10546

Open sarimabbas opened 5 months ago

sarimabbas commented 5 months ago

Astro Info

Astro                    v4.5.9
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   server
Adapter                  none
Integrations             @astrojs/markdoc

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

No response

Describe the Bug

What's the expected result?

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-pnpmhg?file=src%2Fcomponents%2FMarkdocImage.astro

Participation

Princesseuh commented 5 months ago

Thank you for reporting this issue, I can confirm that it doesn't work. You can workaround the issue in the meantime by doing this:

import { defineMarkdocConfig, nodes, component } from '@astrojs/markdoc/config';
import shiki from '@astrojs/markdoc/shiki';

export default defineMarkdocConfig({
  nodes: {
    image: {
      ...nodes.image,
+      attributes: {
+        ...nodes.image.attributes,
+        __optimizedSrc: { type: "Object" }
+      },
      render: component('./src/components/MarkdocImage.astro'),
    },
  },
});

and accessing __optimizedSrc in your component.

sarimabbas commented 5 months ago

Thank you for the help! The workaround worked for me! My component is:

---
import { Image } from "astro:assets";

interface Props {
  alt: string;
  __optimizedSrc: ImageMetadata;
}

const { alt, __optimizedSrc } = Astro.props;
---

<Image src={__optimizedSrc} alt={alt} />

I removed the typeof src === 'string' case as I'm assuming __optimizedSrc will always be of type ImageMetadata?

chappelo commented 2 weeks ago

will try to solve this issue!