How to use images in a `.mdx` file outside of `public/` folder while using `next-mdx-remote` in Next JS?

Question

I am making a blog with next-mdx-remote & want to use images in the .mdx file outside of the public/ folder.

Here's the complete code of my blog project → https://github.com/deadcoder0904/blog-mdx-remote

I have the following folder structure:

.
├── package-lock.json
├── package.json
├── pages
│   ├── _app.js
│   ├── blog
│   │   └── [slug].js
│   ├── dark.css
│   ├── index.js
│   └── new.css
├── posts
│   ├── blog
│   │   ├── hello-world
│   │   │   ├── Rustin_Cohle.jpg
│   │   │   └── index.mdx
│   │   └── shit-world
│   │       └── index.mdx
│   └── tutorials
│       └── console-log-in-javascript
│           └── index.mdx
└── utils
    └── mdxUtils.js

I have all my content in posts/ folder.

I have 2 folders in it: blog/ & tutorials/

Each post is in their own folder inside of blog/ or tutorials/ & every one of those folder contain images that are used in that particular post.

For example, in the hello-world folder, there is 1 image named Rustin_Cohle.jpg.

I want to use this image in hello-world/index.mdx file but I'm unable to do it.

I can't use import or require as it's a limitation of next-mdx-remote.

I tried using a custom component called Image that used img underneath & passed it to hydrate but it didn't work either.

components/Image.js

export const Image = ({ src, alt }) => (
    <img style={{ backgroundColor: 'red' }} src={src} alt={alt} />
)

pages/blog/[slug].js

import hydrate from 'next-mdx-remote/hydrate'
import { Image } from '../components/Image'

const components = { Image }

const Blog = ({ source, frontMatter }) => {
  const content = hydrate(source, { components })
  return (
    <div>
      <h1>{frontMatter.title}</h1>
      {content}
    </div>
  )
}

The following MDX file uses the above Image component as passed through hydrate.

hello-world/index.mdx

---
title: Hello World
date: '2019-09-06T14:54:37.229Z'
tags: ['hello', 'world']
author: John Doe
description: This is the first post
---

Hey this is my first post

![Rustin Cohle](./Rustin_Cohle.jpg)

<img src="./Rustin_Cohle.jpg" alt="Rust Cohle" />

<Image src="./Rustin_Cohle.jpg" alt="Rust Cohle" />

This is the end of the first post

I even tried using MDXProvider & it didn't work either.

pages/index.js

import { MDXProvider } from '@mdx-js/react'

const components = { Image }

const HomePage = ({ posts }) => {
    return (
        <MDXProvider components={components}>
         ...
        </MDXProvider>
    )
}

How do I use images then? I want them to be only in the particular post's folder like hello-world blog would contain its images only in hello-world/ folder.

Answer 1

It's not possible unfortunately as next-mdx-remote treats the markdown content as data & doesn't pass through Webpack at all :(