Convert image relative path to dynamic require expression?

[dpyzo0o]

Hi everyone, I would like to use next-optimized-images to process images used in mdx files, which requires the src property of <img /> to be a dynamic require expression require(./test.jpg).

It works if I use jsx directly <img src={require('./test.jpg')} />, which makes sense. However, I would also like to support the markdown image syntax ![](./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. Does anyone have any ideas how to make it a real require expression rather than a string?

[wooorm]

Well, you can also write JSX in MDX, so you can type the component literally?
Another idea is to overwrite the img component.

It might be more of a question for the next-optimized-images folks though

[ChristianMurphy]

@dpyzo0o without seeing the actual transform, it's hard to comment on what works/doesn't.

In terms of creating a plugin/transform, use the input and the output as a guide.
You want to go from:

![description](./image.jpg)

to

<img alt="description" src={require("./image.jpg")} />

so look at the two ASTs and transform one to the other https://astexplorer.net/#/gist/b83785f495e910aaa71d631699d5c964/54ba6104c2b206f5805951c6736536f528ea7c25

[dpyzo0o]

Wow, thanks. This seems workable, I will give it a try.

[dpyzo0o]

@ChristianMurphy It actually works! Thank you!

[dpyzo0o]

For anyone interested, this is the code snippet which works

const visit = require('unist-util-visit-parents')

module.exports = () => (tree, file) => {
  visit(tree, 'image', (node, ancestors) => {
    const parent = ancestors[1]
    parent.type = 'jsx'
    parent.value = `<img alt={'${node.alt || ''}'} src={require('${
      node.url
    }')} />`
    delete parent.children
  })
}

[lucastobrazil]

I'm wondering about this one too, my situation is that upgrading from Gatsby v4 to 5, we also update MDX. Previously my mdx files had this:

import myImage from '../../image.svg';

<img src={myImage} />

then in my MdxProvider:

<MdxProvider components={{img: props => <ImageComponent {props} /> }} />

However with MDX v2 it seems that the <img /> tag does not get processed as mapping to the img component in MDX? So I have to switch to using the markdown syntax, which doesn't allow for the imported file being added as the src.

Is this true that the <img /> tag will no longer map to the component?

[wooorm]

See https://github.com/orgs/mdx-js/discussions/2314.

If you’re going to write JSX tags (<img>) you can use an uppercase (<Img>) to get components, which is how JSX works. You can use any name, also <ImageComponent>.

[lucastobrazil]

@wooorm ah yes, thanks! I'd originally wanted to keep as much HTML as plain as possible, but realise i was just lucky that img mapped to the img: key in the components object. Have followed your tip and just replaced all the <img /> tags in my MDX with <Img />