When trying to use the <Image> in MDX files, I get import errors
My import is like the below
import { Image } from 'astro:assets';
#mdx image
hoary sonnet
forest lanceBOT
Hi @hoary sonnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Astro, you can use the <Image /> component in your .mdx files by importing it from 'astro:assets'. However, you also need to import the image you want to use. 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 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)
In this example, the rocket image is imported from the assets directory and then used with the <Image /> component, the JSX <img /> tag, and the standard Markdown !**alt** (src) syntax.
If you're still encountering import errors, it might be due to other issues in your project setup or configuration. You might want to check your project's structure and ensure that the paths to your images are correct.