Repository navigation
Add next/image component as MDX component and convert img tags to Image component #4382
Description
There are a lot of images inside markdown that are either img tags or markdown images. Need to use next/image component instead of img tags and markdown images.
Edit: These changes are needed for beta.reactjs.org site
Activity
gaearon commentedon Feb 25, 2022
Ideally we'd keep markdown syntax for images. Something like this maybe? https://kylepfromer.com/blog/nextjs-image-component-blog
harish-sethuraman commentedon Feb 25, 2022
Sounds good we can try the same
seriseri-55 commentedon May 7, 2022
I was interested in making PR for this and wondering why we would use next/image component instead of something like this.
https://www.gatsbyjs.com/plugins/gatsby-plugin-image/#using-the-gatsby-image-components
harish-sethuraman commentedon May 7, 2022
Hey @KazuyaSerizawa the beta.reactjs.org site uses nextjs that is why we are trying to use next/image for it.
Anishpras commentedon May 29, 2022
Hey @gaearon and @harish-sethuraman Can I work on this issue?
harish-sethuraman commentedon May 29, 2022
Feel free to send PR
yashbujji commentedon Jun 12, 2022
is there anyone working on this issue or can i take this?
Dev79844 commentedon Jun 17, 2022
I am interested in solving this issue.
harish-sethuraman commentedon Jun 17, 2022
If you are working on this. Send a PR and we can take it on from there
siddhsuresh commentedon Sep 18, 2022
@harish-sethuraman could I work on this and submit a PR?
harish-sethuraman commentedon Sep 18, 2022
Sure go ahead.
thomasgilmore commentedon Oct 4, 2022
@harish-sethuraman not sure if anyone is still working on this, but could I work on this?
harish-sethuraman commentedon Oct 4, 2022
Sure go ahead.
ShivamPandey00 commentedon Feb 14, 2023
hey @harish-sethuraman.. is anyone working on this issue.
i think i can resolve this issue.
Gua00va commentedon Feb 15, 2023
Hey!! I want to work on this issue. I'm new here so I'm really excited to start contributing. Please assign it to me.
Andres-Ventura commentedon Feb 19, 2023
Geez just assign somebody already lol
ashutosh887 commentedon Mar 19, 2023
@harish-sethuraman I would like to work on this if the PRs are not accepted. Please clarify
ashutosh887 commentedon Apr 26, 2023
@harish-sethuraman Should I work on this?
Aayush895 commentedon May 17, 2023
Hi, I just finished setting up the app locally and I did not understand the problem quite clearly. I am new to open source so any form of help will be appreciated. From the problem statement, I am assuming that the 'img' element in MDXComponents file has to be converted into an Image component right? Correct me if I am wrong
Aayush895 commentedon May 17, 2023
If you can direct me to a particular folder/file that will be highly appreciated, thanks
ashutosh887 commentedon Aug 18, 2023
@harish-sethuraman @gaearon
let me work on this if still not resolved... Please assign
remcohaszing commentedon Mar 21, 2025
If you use
@next/mdxwithrehype-mdx-import-media, it’ll just work™. This would also provide better compatibility with other MDX features, such as editor support.The reason I’m not PRing this, is because requires some quite impactful changes. For example, MDX files should use the
.mdxfile extension, not.md.vishpatel30 commentedon Dec 16, 2025
Will like to work on thiis issue
wdev6666 commentedon Mar 27, 2026
Hi @harish-sethuraman I’d like to work on this issue. Could you please assign it to me?
devtunis commentedon Mar 28, 2026
Hi everyone 👋
I’ve gone through the discussion and existing PR attempts, and I’d like to take this on.
My approach would be:
next/imageas an MDX component<img>and markdown images to theImagecomponentI’ll start by exploring the MDX components setup and propose a clean, minimal-change solution.
Please let me know if there are any constraints or preferred approaches before I begin 🚀
Riya61018 commentedon May 16, 2026
Hello everyone
I would like to contribute in this issue
is anyone else working on it?
can i help?