Placing images alongside mdx in blog post directories

[nk9]

I am going to have many pages, each one of which will have 1+ images. I'd prefer to place the images next to their associated mdx files, ideally like this:

data/
├── blog
│   ├── post-slug-1
│   │   ├── index.mdx
│   │   └── page.jpg
│   ├── post-slug-2
│   │   ├── index.mdx
│   │   └── page.jpg

This is inspired by Hugo page bundles. I'd like this to generate two routes:

/blog/post-slug-1
/blog/post-slug-2

I haven't gotten this to work yet with this template. This seems to require two changes, one to expect index.md[x] and ignore it in favor of the directory, and the other to import images placed next to the mdx. I've started with the image piece.

The mdxBundler README suggests two ways to bundle images placed next to MDX files with remark-mdx-images, using either dataurls, or file URLs. I've placed this in the introducing-multi-… file: ![thumbnail](page.jpg) and then tried different changes to lib/mdx.js, including:

1. Changing the cwd passed to bundleMDX to data/blog and passing the remark plugin to xdmOptions.

  const { code, frontmatter } = await bundleMDX({
    source,
    cwd: path.join(root, 'data/blog/'),
    xdmOptions(options, frontmatter) {
      options.remarkPlugins = [
        remarkMdxImages,
// etc...
    esbuildOptions: (options) => {
      options.loader = {
        ...options.loader,
        '.js': 'jsx',
        '.jpg': 'dataurl',
      }

This required me to update the path to various components in different mdx files, but that was easy enough. Unfortunately, the page build still fails with error: Could not resolve "./page.jpg"

2. Adding a new mdxOptions key to the bundleMDX dictionary and adding remarkMdxImages to the options there:

  const { code, frontmatter } = await bundleMDX({
    source,
    // mdx imports can be automatically source from the components directory
    cwd: path.join(root, 'data'),
    mdxOptions(options, frontmatter) {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),
        remarkMdxImages,
      ]
    },

That got further, since the page actually builds now. But the image isn't bundled as a dataurl and just appears as "thumbnail" in the rendered page. In the console, I get:
ENOENT: no such file or directory, open '/path/to/my-blog/data/blog/nested-route/page.jpg.md'

3. Changing the cwd in these cases to be the parent directory of the mdx, e.g. cwd: path.join(root, 'data', type),. This didn't seem to change the errors or behavior at all.

I haven't actually tried the file URL approach, since it seems to be a bit more involved and I can't even get the simple one working.

Am I on the right track here? I'd appreciate a pointer to how to set this up.

Thanks in advance!

[timlrx]

It has been a long time since I tried it and I remembered it being relatively tricky to set up. Besides modifying the image links from the markdown file using remark-mdx-images or any other remark plugin, you have to ensure that the images are correctly copied by webpack into the public / .next folder so that it resolves correctly. You could try looking at next-images or customizing the webpack loader.

[nk9]

My impression was that the first way, using data URLs, is simpler because it avoids this complexity. It just needs to be able to find the images on disk during the build stage, and then the generated HTML will just contain the encoded image. The webpack step shouldn't have to change then, right?

But for some reason, even this approach isn't working.

[benjick]

Hey @nk9, did you ever work this out? I would want to move to nextjs from gatsby but not without this functionality

[nk9]

Unfortunately not. Would like to hear if you find a solution, though!