[jodie] How do I show local imagines in MDX on pages?

[xavdid]

Hi there! I'm trying to add an image inline to an mdx page. I'm using @lekoarts/[email protected].

I have the following filestructure:

<root>/content/pages/contact
├── my-image.jpg
├── art-cover-image.jpg
└── index.mdx

And index.mdx has the following content:

---
title: "Contact"
slug: "/contact"
cover: "./art-cover-image.jpg"
---

# Get in Touch
lorem ipsum ...

![IMAGE HERE](./my-image.jpg)

Unfortunately, the image doesn't show. I read through the Working with images in MDX, specifically the inline section.

I followed the instructions for gatsby-plugin-mdx and modified my gatsby-config, but got the error Identifier 'GATSBY_COMPILED_MDX' has already been declared. (3:7) when running yarn develop.

I can load the image just fine from static, but it would be nice to be able to have it take advantage of the gatsby image tooling and wrap it in a div. Though, now that I think about it, writing something like the following probably takes additional steps, right?

---
title: "Contact"
slug: "/contact"
cover: "./art-cover-image.jpg"
---

# Get in Touch

<div style={{display:'flex'}}>
  <div><GatsbyImage image={'...'}></div>
  <div><p>etc etc contact</p></div>
</div>

Anyway, help here is greatly appreciated. thank you!

[alexeiva]

Had the same issue, answer is here: #567 (comment)