Import images at aliased path in markdown/mdx

[ddamato]

Body

Summary

I'd like to leverage Astro's image optimization service in a .mdx? file without needing to traverse the directory structure, using the paths configuration from the tsconfig.json.

Background & Motivation

The docs mentions that you can get files optimized from the src/assets directory in .mdx? files however that requires you to recall and retype the path to those images. In many cases since these content files are deep within a structure that has nothing to do with src/assets, you need to go down and come back up. It would be easier to leverage the existing @assets alias defined in the tsconfig.json to point to these assets.

Note

I'm aware that .mdx files can import using aliases but that requires the use of the <Image/> element as well. This is more cumbersome than using standard markdown syntax (![]()).

Goals

• Use the aliased path defined for the src/assets in .mdx? files.

Example

---
title: My blog post
---

![A picture of my dog]('@assets/my-dog.png')

[natemoo-re]

According to @Princesseuh's response on Bluesky this should already work! If it doesn't, we can probably consider it a bug.

[delucis]

An issue in the example code above might be the '' around the file name? I’d expect the following to work though:

![A picture of my dog](@assets/my-dog.png)

[ddamato]

Hmm interesting, I've never seen the ~ alias before. The docs says to use the @ symbol.

The '' is a typo, it's been a while since I've wanted to do this. I end up avoiding putting images in my markdown because of this, so I don't do the syntax that often. I would if the path was easier.

I'm going to build a new Astro site soon and I'll try it out again. If it works now I'll close or report if not.

[Princesseuh]

You can configure aliases to use whichever character / text you prefer, it's just an example.

[jsparkdev]

I added the image using the following code in MDX, and it works fine (but getting an error in the .md file).

![Red](~images/red.jpg)

The alias for tsconfig.json is

"paths": {
  "~images/*": ["src/assets/images/*"]
 }

[florian-lefebvre]

@ddamato did you try it?