Is it possible tu use the astro asset <Image> in a markdown file ?
#Astro assets Image in markdown
glass star
jaunty salmonBOT
Hi @glass star. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, it is possible to use Astro's <Image /> component in a Markdown file, but it requires using the .mdx file format instead of the standard .md format. The .mdx format allows you to import and use both the <Image /> component and JSX <img /> tags in your files. Here's an example:
---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 standard .md files, you can use the standard Markdown !**alt** (src) syntax for images, but the <img> tag and <Image /> component are not supported for local images[^1^].
For more control over your image attributes, you can use the .mdx file format, which allows you to include Astro’s <Image /> component or a JSX <img /> tag in addition to the Markdown syntax[^1^].
^1^]: (source: [Astro Documentation (https://docs.astro.build/en/guides/images/#images-in-markdown-files))
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
glass star
@jaunty salmon ok but I display this image in a layout, but the link is in the md file, so I can't import the image on my layout so it does not help to optimize
jaunty salmonBOT
Let me check the knowledge base for you. One moment! :books:
Astro's image optimization works with local images stored in the src/ directory when using the standard Markdown !**alt** (src) syntax in your .md files[^1^]. However, images stored in the public/ folder or remote images are not optimized[^1^].
If you're using a layout to display images and the image source is specified in the Markdown file, you might encounter issues with image optimization. This is because the <Image /> component from Astro's assets is not available in .md files[^1^].
If you need more control over your image attributes or want to optimize images in this scenario, you might consider using the .mdx file format. This allows you to include Astro’s <Image /> component or a JSX <img /> tag in addition to the Markdown syntax[^1^][^5^].
However, please note that there have been reported issues with image optimization in Astro, such as redundant optimization of the same image[^4^] and issues with relative image URLs in Markdown files[^8^]. These issues might affect the performance and behavior of image optimization in your project.