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 imgUrl from "./blog-assets/blog-image.png";    <img alt="alt" src={imgUrl} />

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="./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