49 lines
1.1 KiB
Markdown
49 lines
1.1 KiB
Markdown
|
---
|
||
|
|
'@astrojs/mdx': minor
|
||
|
|
---
|
||
|
|
|
||
|
|
Support the `img` component export for optimized images. This allows you to customize how optimized images are styled and rendered.
|
||
|
|
|
||
|
|
When rendering an optimized image, Astro will pass the `ImageMetadata` object to your `img` component as the `src` prop. For unoptimized images (i.e. images using URLs or absolute paths), Astro will continue to pass the `src` as a string.
|
||
|
|
|
||
|
|
This example handles both cases and applies custom styling:
|
||
|
|
|
||
|
|
```astro
|
||
|
|
---
|
||
|
|
// src/components/MyImage.astro
|
||
|
|
import type { ImageMetadata } from 'astro';
|
||
|
|
import { Image } from 'astro:assets';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
src: string | ImageMetadata;
|
||
|
|
alt: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const { src, alt } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
{
|
||
|
|
typeof src === 'string' ? (
|
||
|
|
<img class="custom-styles" src={src} alt={alt} />
|
||
|
|
) : (
|
||
|
|
<Image class="custom-styles" {src} {alt} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.custom-styles {
|
||
|
|
border: 1px solid red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
Now, this components can be applied to the `img` component props object or file export:
|
||
|
|
|
||
|
|
```md
|
||
|
|
import MyImage from '../../components/MyImage.astro';
|
||
|
|
|
||
|
|
export const components = { img: MyImage };
|
||
|
|
|
||
|
|
# My MDX article
|
||
|
|
```
|