Hi @shrewd violet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#image in mdx
icy zealotBOT
To use the Image component in .mdx files in Astro, you need to import both the component and your image. Here's an example of how you can do this:
---
title: My Page title
---
import { Image } from 'astro:assets';
import rocket from '../assets/rocket.png';
# My MDX Page
// Local image stored in the the same folder
!**Houston in the wild** (houston.png)
// Local image stored in src/assets/
<Image src={rocket} alt="A rocketship in space." />
<img src={rocket.src} alt="A rocketship in space." />
!**A rocketship in space** (../assets/rocket.png)
// Image stored in public/images/
<Image src="/images/stars.png" alt="A starry night sky." />
<img src="/images/stars.png" alt="A starry night sky." />
!**A starry night sky.** (/images/stars.png)
// Remote image on another server
<Image src="<https://example.com/images/remote-image.png"> />
<img src="<https://example.com/images/remote-image.png"> />
!**Astro** (<https://example.com/images/remote-image.png>)
In this example, the Image component and the image file (rocket.png) are imported at the top of the file. Then, the Image component is used to display the image with the src attribute set to the imported image and the alt attribute set to a description of the image. The standard JSX <img /> tag and the standard Markdown !**alt** (src) syntax are also used to display the same image.
You can find more information about using images in Astro in the Images Guide (https://docs.astro.build/en/guides/images/).