updated to gatsby v4 and now mdx image variables renders as text instead of a path

[AlexanderThiele]

Summary

Hello!
thanks for this lib! I recently updated gatsby to the latest version "gatsby": "^4.2.0" and also your lib to the latest version.

I'm currently testing and my images don't really seem to work anymore. Here is what i do:

inside the MDX file i import the image and use it as the src of an img.

import abc from '../../src/assets/linkfive/some/image.png'

...

<img src={abc} />

When i check the console, the html is rendered like this: <img src="{abc}" />

The strange part is that if i change the src tag to anything else, it works. For example like this:

import abc from '../../src/assets/linkfive/some/image.png'

...

<img rc={abc} />

Then the rendered HTML looks like this:

<img rc="/6b99b4641c4bf8b9f98bfe968de14325.png">

which is the correct png path.

i actually don't know that to do anymore. do you have any ideas?

Relevant information

Another thing i found during develop launch

warn Plugin `@rocketseat/gatsby-theme-docs-core` has customized the GraphQL type `MdxFrontmatter`, which has already been
defined by the plugin `gatsby-plugin-mdx`. This could potentially cause conflicts.

i checked the yarn.lock file and your lib is the only dependency of gatsby-plugin-mdx

[jpedroschmitz]

Hey @AlexanderThiele!

By the time you opened the issue, the theme didn't support Gatsby 4, but today I released a new version that supports v4. Let me know if the problem persists after updating it.

I recommend creating a fresh install of the theme, using the starter https://github.com/jpedroschmitz/gatsby-starter-rocketdocs.

[AlexanderThiele]

Awesome! Many thanks! I will test and let you know asap!

[AlexanderThiele]

Hey @jpedroschmitz, i still have the same issue.

i found a workaround. I created a new react component:

import React from "react";

export default function DocImg(props) {
  var {img, title, className, width } = props
  return <>
    <a href={img} target="_blank" title="open image in a new tab"><img src={img} alt={title} title={title} className={className} width={width} /></a>
  </>
}

and used it in the docs

<DocImg img={apikeyImg} title="LinkFive.io - How to create a new Api Key" />

I have implemented your docs a little bit different. it's part of a bigger gatsby project where /docs are rendered with your lib and everything else is custom gatsby.

the <img src="{apikeyImg}"> issue worked in gatsby v3 but not in v4.

the issue could also appear because of some other dependencies I use.

[rstrazz]

Just wanted to see if there is a resolution for this too, I plan to have a lot of images in my docs and as a complete newbie I'm looking for an easy way to manage a bunch of images in my project and then referencing them throughout different documents.