问题描述
背景：
我正在使用页面布局模板以编程方式在 /src/content/ 中创建带有 .mdx 文件的页面。一切正常，直到我需要从 .mdx 文件的 frontmatter 中获取图像，格式如下：
示例：/src/content/.../.../hello-world.mdx
---
title: foo
image: ../images/icon.png
---
hello world.
我的 gatsby-config.js 中都安装并引用了 gatsby-plugin-image、gatsby-plugin-sharp、gatsby-source-filesystem 和 gatsby-transformer-sharp 插件。此外，我使用 gatsby-source-filesystem 的选项设置了我的 gatsby-config.js 文件，以在 /src/content 中查找 .mdx 文件。
问题：
Gatsby 声明 here “任何包含图像的 GraphQL File 对象都将有一个 childImageSharp 字段，您可以使用它来查询图像数据。”然而，这不会发生在我身上：
它只是将 frontmatter 中的 image: 键视为字符串，而从不为其提供 childImageSharp 字段。无论如何尝试通过写出字段来强制查询只会导致错误。
但是！！！
如果我将同一个 .mdx 文件放在 /src/pages 中，突然 gatsby-plugin-image 开始正常运行并提供 childImageSharp 字段：
为什么？
更新：将 .mdx 文件放入 /src/content/ 作品中，并且 childImageSharp 字段出现在 GraphQL 中，但 .mdx 文件放置在更深的任何位置（例如：src/content/recipes/guacamole/）不起作用。
解决方法
答案：
../images/icon.png 不是位于 /src/content/recipes/guac/ 中的文件引用位于 /src/images/ 中的图像的有效路径。我的图像密钥在 .mdx frontmatter 中应该具有的正确路径应该相对于 .mdx 的位置（例如：image: ../../../images/icon.png）。
我的路径是错误的。因此 GraphQL 没有将其识别为文件，也没有创建 childImageSharp 字段。