Import images with relative path

🔙 Read in 9 min., written by ipikuka

1. Import image via relative path (using html syntax)

Normally, importing an image using a relative path (starting with ./ or ../) in MDX results in an error with the message unknown extension .png. However, thanks to the recma-mdx-change-imports plugin, relative path resolution is handled seamlessly.

html syntax	proof
import imgUrlA from "./article-assets/article-image.png";   <img alt="alt" src={imgUrlA} />
import imgUrlB from "../blog-assets/blog-image.png"; <img alt="alt" src={imgUrlB} />

You don’t even need to write an import statement, thanks to recma-mdx-import-media. It automatically includes import statements for assets with relative paths in the compiled MDX source.

html syntax	proof
<img alt="alt" src="./article-assets/article-image.png" />
<img alt="alt" src="../blog-assets/blog-image.png" />

2. Import image via relative path (using markdown syntax)

With the recma-mdx-import-media and recma-mdx-change-imports plugins working together, you can seamlessly display images using a relative path in Markdown/MDX.

markdown syntax	proof