Any way to support relative image for markdown in remix?

[szhshp]

Hi there,

I have lots of .md files and most of them have assets in same folder. Directory structure like this:

• app
  • routes
  • ...
• posts
  • folder1
    • index.md
  • folder2
    • assets
      • 01.png
    • index.md
  • ...

And in the file posts/folder2/index.md we may have markdown to show images in relative path:

![](./assets/01.png)

All these image files are not put in assets folder(/public)

Gatsby have gatsby-remark-relative-images for this feature. Is there any build-in way in Remix to do that?

Here are some ideas:

1. Use route to serve the image file
   • Validate the slug and return image file directly in loader?
2. Move all post folders into /public and add filter to build non-md-files to build path only?
3. Other Remark plugin?

[sergiodxa]

I think you need MDX for that, so you can import the image

import image from "./path/to/image"

<img src={image} />

In plain Markdown, you have to move the images to the public folder and then do /path/to/image, without that the image will not be moved to public automatically.

[szhshp]

Thanks! I think public folder should be the best choice.

[meoyawn]

made a little package to do this in remix https://github.com/meoyawn/markdown-assets

[evgeny-kim]

You could use mdx-js to transform Markdown to JSX.
And then rehype-mdx-import-media plugin to add image imports, so they can be treated like assets.

Then your Markdown

![](./image.png)

gets transformed to something like that:

import _rehypeMdxImportMedia0 from './image.png'

export default function MDXContent() {
  return (
    <p>
      <img alt="" src={_rehypeMdxImportMedia0} />
    </p>
  )
}

Here's a Vite config:

import mdx from '@mdx-js/rollup';
import rehypeMdxImportMedia from 'rehype-mdx-import-media';

defineConfig({
    ...
    plugins: [
        mdx({
            rehypePlugins: [
                rehypeMdxImportMedia
            ]
        }),
        remix({
            ...
        })
    ]
})