title: How to use images in a `.mdx` file outside of `public/` folder while using `next-mdx-remote` in Next JS?
body: <p>I am making a blog with <a href="https://github.com/hashicorp/next-mdx-remote" rel="noreferrer">next-mdx-remote</a> &amp; want to use images in the <code>.mdx</code> file outside of the <code>public/</code> folder.</p>
  <p>Here's the complete code of my blog project → <a href="https://github.com/deadcoder0904/blog-mdx-remote" rel="noreferrer">https://github.com/deadcoder0904/blog-mdx-remote</a></p>
  <p>I have the following folder structure:</p>
  <pre><code>.
  ├── 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
  </code></pre>
  <p>I have all my content in <code>posts/</code> folder.</p>
  <p>I have 2 folders in it: <code>blog/</code> &amp; <code>tutorials/</code></p>
  <p>Each post is in their own folder inside of <code>blog/</code> or <code>tutorials/</code> &amp; every one of those folder contain images that are used in that particular post.</p>
  <p>For example, in the <code>hello-world</code> folder, there is 1 image named <code>Rustin_Cohle.jpg</code>.</p>
  <p>I want to use this image in <code>hello-world/index.mdx</code> file but I'm unable to do it.</p>
  <p>I can't use <code>import</code> or <code>require</code> as it's a limitation of <code>next-mdx-remote</code>.</p>
  <p>I tried using a custom component called <code>Image</code> that used <code>img</code> underneath &amp; passed it to <code>hydrate</code> but it didn't work either.</p>
  <h1>components/Image.js</h1>
  <pre class="lang-js prettyprint-override"><code>export const Image = ({ src, alt }) =&gt; (
      &lt;img style={{ backgroundColor: 'red' }} src={src} alt={alt} /&gt;
  )
  </code></pre>
  <h1>pages/blog/[slug].js</h1>
  <pre class="lang-js prettyprint-override"><code>import hydrate from 'next-mdx-remote/hydrate'
  import { Image } from '../components/Image'
  
  const components = { Image }
  
  const Blog = ({ source, frontMatter }) =&gt; {
    const content = hydrate(source, { components })
    return (
      &lt;div&gt;
        &lt;h1&gt;{frontMatter.title}&lt;/h1&gt;
        {content}
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>The following MDX file uses the above <code>Image</code> component as passed through <code>hydrate</code>.</p>
  <h1>hello-world/index.mdx</h1>
  <pre><code>---
  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)
  
  &lt;img src=&quot;./Rustin_Cohle.jpg&quot; alt=&quot;Rust Cohle&quot; /&gt;
  
  &lt;Image src=&quot;./Rustin_Cohle.jpg&quot; alt=&quot;Rust Cohle&quot; /&gt;
  
  This is the end of the first post
  </code></pre>
  <p>I even tried using <code>MDXProvider</code> &amp; it didn't work either.</p>
  <h1>pages/index.js</h1>
  <pre class="lang-js prettyprint-override"><code>import { MDXProvider } from '@mdx-js/react'
  
  const components = { Image }
  
  const HomePage = ({ posts }) =&gt; {
      return (
          &lt;MDXProvider components={components}&gt;
           ...
          &lt;/MDXProvider&gt;
      )
  }
  </code></pre>
  <p>How do I use images then? I want them to be only in the particular post's folder like <code>hello-world</code> blog would contain its images only in <code>hello-world/</code> folder.</p>