Getting access to the markdown file's path from an MDX component?

[ziad-saab]

Using from markdown will load the image relative to the markdown file. If I want to instead use <MyCustomImage src="images/photo.png" />, then the MyCustomImage component has no way of knowing what path to use to load the image.

My current solution is to use <MyCustomImage src={require("images/photo.png").default} /> inside the MDX. This works, but when I have many images, it gets tedious. Is there any way I could achieve what I want while keeping these relative paths, and not having to use require for each image I'm loading?

For example I know that remark and rehype plugins get an extra argument called vfile which is the path to the markdown file. Is there anything similar for MDX components?

[slorber]

It's possible for you to create a custom Remark plugin that transforms this:

<MyCustomImage src="images/photo.png" />

Into this:

<MyCustomImage src={require("images/photo.png").default} />

We might provide this later, but for now, we don't. But you can implement this yourself in the meantime, and that's helpful for us because we could later steal your code ;)

---

Your screenshot is online and I'm not sure to understand how getting access to the markdown file path is related to the issue 😅