graphql - 使用 MDX 在 Gatsby 博客中添加 featuresImage

Question

我正在尝试在我的 Gatsby 博客上添加特色图片，但无法使其正常工作。我尝试了一些在这里和那里找到的东西，但我一直收到此错误消息: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

问题通常来自多个来源:

当字符串路径的命名存在差异时(在您的情况下为图像)。例如，如果您正在寻找:../../images/house.jpeg但图像被放置或命名 house.jpg (不是 jpeg )。作为相对路径，我假设问题来自那里。尝试将其更改为类似 ./path/to/image.jpg 的内容

检查拼写

查看插件订单

使用 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