New gatsby-plugin-mdx has no localImage property

[wout-junius]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

As found in this documentation we could use the html images in MDX by setting the localImages in the MDXRenderer. But since aftedr v4 this renderer does not excist i canot find a way, or even see any reference on how to in the documentations

What is the new way to do this, and where is the documentation page for it

as seen on the page: https://www.gatsbyjs.com/blog/mdx-embedded-gatsby-image/

Reproduction Link

https://github.com/wout-junius/GatsbyJS_Image_problem

Steps to Reproduce

1. run dev
2. go to [ip]:4000/posts/firstpost

Expected Result

Shows image and no errorpage

Actual Result

Shows errorpage:

Error in function _createMdxContent in ./Content/blog/index.mdx:27
Cannot read properties of undefined (reading '0')

  25 |   return React.createElement(React.Fragment, null, React.createElement(GatsbyImage, {
  26 |     alt: "Sam in a destroyed mall",
> 27 |     image: getImage(props.localImages[0])
     |                                      ^
  28 |   }), "\n", React.createElement(_components.h1, null, "Lorem Ipsum"), "\n", React.createElement(_components.p, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), "\n", React.createElement(_components.h2, null, "Subtitle"), "\n", React.createElement(_components.p, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), "\n", React.createElement(_components.h2, null, "Subtitle"), "\n", React.createElement(_components.p, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), "\n", React.createElement(_components.h2, null, "Subtitle"), "\n", React.createElement(_components.p, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), "\n", React.createElement(_components.h2, null, "Subtitle"), "\n", React.createElement(_components.p, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim"), "\n", React.createElement(_components.div, {
  29 |     className: "math math-display"
  30 |   }, React.createElement(_components.span, {

Environment

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics         
  Binaries:
    Node: 19.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.9
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (109.0.1518.55)
  npmGlobalPackages:
    gatsby-cli: 5.4.0

Config Flags

No response

[LekoArts]

Hi!

For your specific "localImage" I'd recommend using https://www.gatsbyjs.com/plugins/gatsby-remark-images/. If you want to pass props to your MDX content you can pass that to the <MDXProvider />: https://mdxjs.com/packages/react/#props

This wasn't any built-in thing to gatsby-plugin-mdx but a very specific way of doing things. If your only use case is local images, I'd just use gatsby-remark-images.