astro/.changeset/shaggy-spies-sit.md

@astrojs/markdoc
minor

Adds support for using a custom tag (component) for optimized images

Starting from this version, when a tag called image is used, its src attribute will automatically be resolved if it's a local image. Astro will pass the result ImageMetadata object to the underlying component as the src prop. For non-local images (i.e. images using URLs or absolute paths), Astro will continue to pass the src as a string.

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

export default defineMarkdocConfig({
	tags: {
		image: {
			attributes: nodes.image.attributes,
			render: component('./src/components/MarkdocImage.astro'),
		},
	},
});

---
// src/components/MarkdocImage.astro
import { Image } from "astro:assets";

interface Props {
  src: ImageMetadata | string;
  alt: string;
  width: number;
  height: number;
}

const { src, alt, width, height } = Astro.props;
---

<Image {src} {alt} {width} {height} />

{% image src="./astro-logo.png" alt="Astro Logo" width="100" height="100" %}