gatsby - 无法将图像添加到 Gatsby 中的 mdx 文件

Question

我正在尝试通过执行以下操作将图像导入 mdx 文件：![alt](image.jpg). 我的 mdx 文件和图像都存储在目录 src、posts、post-1 中。但是，图像不显示。我尝试了许多文件路径，但都没有运气。

我能够显示图像的唯一方法是使用 src 例如![alt](/static/47d93fd9bdeaaf54a7b60d14c66abe5d/48e00/icon.jpg)

以下是我的 gatsby.config 的一部分

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `post-featured`,
        path: `${__dirname}/src/post-featured/`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        root: __dirname,
        extensions: [".md", ".mdx"],
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 800,
              quality: 70,
            },
          },
        ],
      },
    },

Answer 1

我认为您需要将图像引用为以 开头的相对路径./，例如![alt](./image.jpg)

在文档中不是特别清楚，但在https://www.gatsbyjs.org/packages/gatsby-remark-images/#usage-in-markdown中提到

Answer 2

我通过在我的博客文章 mdx frontmatter 例如中添加一个图像数组来解决这个问题images: [formby-golf-club.jpg, myFirstTweet.PNG]。

然后在我的帖子模板中，我通过 graphQL 获取数组中图像的 publicURL，并将它们传递给 MDXRenderer，如下所示<MDXRenderer images={data.mdx.frontmatter.images}>：

然后我可以像这样访问我的 mdx 文件中的图像数组：<img src={props.images[0].publicURL} style={{ width: "100%" }} />

Answer 3

在阅读官方操作指南并在插件数组中添加gatsby-remark-image为单个条目后，我遇到了同样的问题。只保留在里面gatsby-plugin-mdx为我解决了这个问题。