gatsby-plugin-image and GraphQL don't recognize my image frontmatter when .mdx is outside of /pages/ directory

Question

BACKGROUND:

I am programmatically creating pages with .mdx files within /src/content/ using page layout templates. Everything is working perfectly until I need to grab the image from the .mdx file's frontmatter formatted like so:

example: /src/content/.../.../hello-world.mdx

---
title: foo
image: ../images/icon.png
---
hello world.

I have the plugins gatsby-plugin-image, gatsby-plugin-sharp, gatsby-source-filesystem, and gatsby-transformer-sharp all installed and referenced in my gatsby-config.js. Furthermore, I have my gatsby-config.js file set up with gatsby-source-filesystem's options to look for .mdx files within /src/content.

THE PROBLEM:

Gatsby states here that "Any GraphQL File object that includes an image will have a childImageSharp field that you can use to query the image data." However that isn't happening for me:

It simply sees the image: key in the frontmatter as a string and never gives it the childImageSharp fields. Attempting to force the query by writing out the fields anyway just results in errors.

HOWEVER!!!

If I take that same .mdx file and place it within /src/pages suddenly gatsby-plugin-image starts operating correctly and gives the childImageSharp fields:

WHY?

UPDATE: placing .mdx file into /src/content/ works and childImageSharp fields appear in GraphQL, but .mdx files placed anywhere deeper (ex: src/content/recipes/guacamole/) do not work.

Answer 1

ANSWER:

../images/icon.png is not a valid path for a file living in /src/content/recipes/guac/ to be referencing an image that lives in /src/images/. The correct path that my image key should have in the .mdx frontmatter should be relative to the .mdx's location (ex: image: ../../../images/icon.png).

MY PATH WAS WRONG. Therefore GraphQL did not recognize it as a file and did not create the childImageSharp fields.