Image syntax in MDX for reference
đź”™ Read in 8 min., written by ipikuka
1. Image syntax in markdown / mdx (in public directory)
Normally, we put the images in public directory, and use root-relative links (/pathname-to-image)
for referring it. Pay attention to that the images should be in the public directory.
| format | syntax | proof |
|---|---|---|
| markdown |  |  |
| html | <img alt="alt" src="/public-image.png" /> | |
| component | <Image alt="alt" src="/public-image.png" /> |  |
2. Image syntax in markdown / mdx (in a custom directory)
In order images to be placed alongwith the articles, we should create a custom middleware in Next.js,
which is available as of the version next@15.2.0-canary.41
Thanks to that middleware, the data directory containing the articles will be accessible for GET requests.
To verify this, let's display the images from the data directory.
| format | syntax | proof |
|---|---|---|
| markdown |  |  |
| html | <img alt="alt" src="/data/articles-strategy-flat-content/blog-assets/blog-image.png" /> | |
| component | <Image alt="alt" src="/data/articles-strategy-flat-content/blog-assets/blog-image.png" /> |  |
As you can see, referencing images based on their directory can be a bit challenging. If you move the article to another directory, you’ll also need to update the src attribute, which can be cumbersome.
That is why we need to use relative path instead of root-relative path for the assets.
See how we can use relative paths starts with ./ or ../ in the next article.