How to inject/use images from the same folder that my .mdx?

[kud]

Hello,

I use next.js + mdx and I wonder how to inject images from the same folder that my .mdx which are in pages folders?

I've tried different ways and only import with jsx way works.

As you can see on the screenshot, I've got two places for those images:

• in the same folder
• in public/images folder

I tried different ways:

import testSrc from "./test.gif"

![](test.gif)
![](./test.gif)
![](testSrc)
![]({testSrc})

<img src={"test.gif"} />
<img src={"./test.gif"} />
<img src={testSrc} />

./test.gif
test.gif
{testSrc}

![](/images/background.jpg)

<img src={"/images/background.jpg"} />

/images/background.jpg

All public images work, obviously.

But about the same folder, only <img src={testSrc} /> this one work.

The different ways work thanks to const images = require("remark-images") (especially this behaviour where you inject directly the path of the image like /images/background.jpg)

So my question is how to make next.js or/and webpack + mdx to make this work:

![](./test.gif)
<img src={"./test.gif"} />
./test.gif

Thank you.

[kud]

I found a solution but it's not the best IMO:

// index.mdx

<img src={require("./background.jpg")} />

[Strajk]

@kud hey, any luck finding a better solution? I'm struggling with exactly the same problem

[dpyzo0o]

same here, any updates?

[Strajk]

I ended up using https://github.com/sergioramos/remark-copy-linked-files and it works well 👍

next.config.js

config.module.rules.push({
  test: /.mdx?$/,
  use: [
    options.defaultLoaders.babel,
    {
      loader: '@mdx-js/loader',
      options: {
        remarkPlugins: [
          require('./common/remark-copy-linked-files'), // my copy, adjusted a little bit
        ],
      },
    },
  ],
});

cc @dpyzo0o

[kud]

Thanks, I'll have a try of this!

[dpyzo0o]

Thanks. However my use case is a bit different, I would like to use next-optimized-images to process the images used in mdx files. Which means I need to convert the ![](./test.jpg) expression into a require(./test.jpg).

If you open mdx plaground, you can see the mdx transformation result:

// mdx
![](./test.jpg)

// jsx
<p><img parentName="p" {...{
  "src": "./test.jpg",
  "alt": null
}}></img></p>

So basically mdx just takes out the filepath and puts it as a string to the src property, I would like the result to be

// jsx
<p><img parentName="p" {...{
  "src": require("./test.jpg"),
  "alt": null
}}></img></p>

I tried to write a remark plugin but it seems whatever value I assign to the src property would become a string. Do you have any ideas how to make it a real require expression rather than a string?

[Strajk]

@dpyzo0o sry, don't know much about that :(

[softmarshmallow]

Any standard and officially supported way for this?

[nirnejak]

Any update on this?