How to use image path variable in mdx file?

[yuijzeon]

I have a *.mdx file and I want to set the image src path with a variable

import viteLogo from "@/assets/vite.svg";

{viteLogo}
{/* correct output: /src/assets/vite.svg */}

![VITE]({viteLogo})
{/* expect output: <img src="/src/assets/vite.svg" alt="VITE"> */}
{/* actual output: <img src="{viteLogo}" alt="VITE"> */}

Is it possible?

[ChristianMurphy]

Duplicate of #2411

MDX is not a templating language where you can add variables anywhere you want. So you can’t put braces anywhere (and that’s not a goal).

Markdown already has references/definitions. You don’t need variables to solve this:

Some [link][some-url]

[some-url]: https://whatever

You can also already use JSX for this:

export const whatever = 'https://example'

Like <a href={whatever}>*this*</a>.

[yuijzeon]

thanks ChristianMurphy

[remcohaszing]

As an alternative to @ChristianMurphy’s answer, you could use rehype-mdx-import-media.