mirror of
https://github.com/withastro/astro.git
synced 2024-12-23 21:53:55 -05:00
14ce8a6ebf
* feat(markdoc): Add support for using a custom component for images * chore: changeset * test: add test * Update .changeset/shaggy-spies-sit.md Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev> --------- Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
41 lines
1.1 KiB
Markdown
41 lines
1.1 KiB
Markdown
---
|
|
"@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.
|
|
|
|
```ts
|
|
// 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'),
|
|
},
|
|
},
|
|
});
|
|
```
|
|
```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} />
|
|
```
|
|
```mdoc
|
|
{% image src="./astro-logo.png" alt="Astro Logo" width="100" height="100" %}
|
|
``````
|