使用MDX在盖茨比博客中添加featuredImage

Question

我试图在我的盖茨比博客上添加一个特色图片，但无法使它工作。我到处找了几样东西，但是我一直有一条错误消息：Field "featuredImage" must not have a selection since type "String" has no subfields.

以下是我的博客结构：

src
 |- images
   |- house.jpeg
 | - pages
   |- actualites
     |- house.mdx

我的house.mdx有以下前端内容：

---
title: House
path: /house
date: 2019-01-29
featuredImage: ../../images/house.jpeg
---

我的gatsby-plugin看起来是这样的：

plugins: [
    `gatsby-plugin-resolve-src`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
  ],

我不知道我做错了什么..。http://localhost:8000/___graphql向我展示了我的featuredImage，但没有显示图像的子字段，所以我猜它不明白我的字段是图像。

你能帮我指出我错过了什么吗？

谢谢

Answer 1

我终于能让它发挥作用了。

问题是我请求的是allSitePage而不是allMdx在我的graphQL中。现在，我可以将我的路径看作一个图像，并请求它的所有子字段。

Answer 2

这个问题通常来自多个方面：

当字符串路径的命名存在差异时，

• (在您的示例中是图像)。例如，如果您正在寻找：../../images/house.jpeg，但是图像被放置或命名为house.jpg (而不是jpeg)。作为相对路径，我认为这个问题来自于此。尝试将其更改为类似于./path/to/image.jpg
• Check拼写、
• 、check plugins order
• Use GraphQL游乐场(localhost:8000/___graphql)之类的内容，通过在那里创建一个特定的查询来检查图像的正确路径。

参考资料/有用资源：

• https://github.com/gatsbyjs/gatsby/issues/13322
• https://github.com/gatsbyjs/gatsby/issues/4123
• https://dev.to/stephencweiss/error-field-image-must-not-have-a-selection-since-type-string-has-no-subfields-3a76
• https://spectrum.chat/gatsby-js/general/this-error-field-img-must-not-have-a-selection-since-type-string~05669aa2-8045-4875-a82b-c52e53df791e