在gatsby中使用featureimage

Question

我想在我的博客帖子中显示featuredImages。

我的前额看起来像这样：

---
title: My pst with a feature image
date: "2021-05-16T09:45:00.000Z"
description: "Some cool post with a feature image"
tags: [demo]
featuredImage: "feature.png"
---

index.md和feature.png是同一目录中的同级。我使用这个查询：

query BlogPostBySlugDev($id: String!) {
  markdownRemark(id: {eq: $id}) {
    id
    frontmatter {
      title
      date(formatString: "D. MMMM YYYY", locale: "de-DE")
      dateIso: date(formatString: "YYYY-MM-DD", locale: "en-US")
      description
      tags
      featuredImage {
        childImageSharp {
          gatsbyImageData(width: 400)
        }
      }
    }
  }
}

我在GraphiQL中得到了这个结果：

{
  "data": {
    "markdownRemark": {
      "id": "f73a3644-493c-5cc4-8a5d-f749db898954",
      "frontmatter": {
        "title": "My pst with a feature image",
        "date": "16. Mai 2021",
        "dateIso": "2021-05-16",
        "description": "Some cool post with a feature image",
        "tags": [
          "demo"
        ],
        "featuredImage": {
          "childImageSharp": null
        }
      }
    }
  },
  "extensions": {}
}

这不是我所期待的。我希望在这里得到我的图像数据...同样，我在控制台(在开发模式下运行gatsby )上收到以下消息：

warn You can't use childImageSharp together with undefined.undefined — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined

我正在使用这些包：

    "gatsby": "^3.1.1",
    "gatsby-plugin-feed": "^3.1.0",
    "gatsby-plugin-gatsby-cloud": "^2.1.0",
    "gatsby-plugin-google-analytics": "^3.1.0",
    "gatsby-plugin-image": "^1.1.1",
    "gatsby-plugin-manifest": "^3.1.0",
    "gatsby-plugin-offline": "^4.1.0",
    "gatsby-plugin-pnpm": "^1.2.5",
    "gatsby-plugin-react-helmet": "^4.1.0",
    "gatsby-plugin-sharp": "^3.1.1",
    "gatsby-plugin-typescript": "^3.1.0",
    "gatsby-remark-copy-linked-files": "^3.1.0",
    "gatsby-remark-images": "^4.1.0",
    "gatsby-remark-prismjs": "^4.1.0",
    "gatsby-remark-responsive-iframe": "^3.1.0",
    "gatsby-remark-smartypants": "^3.1.0",
    "gatsby-source-filesystem": "^3.1.0",
    "gatsby-transformer-remark": "^3.1.0",
    "gatsby-transformer-sharp": "^3.1.0",

我还在gatsby-node.js中扩展了Frontmatter类型，以便将featureImage识别为文件：

    type Frontmatter {
      title: String
      description: String
      date: Date @dateformat
      tags: [String!]
      featuredImage: File
    }

最后，我设置了gatsby-source-filesystem插件来解析两个路径(因为我有帖子和页面)：

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    }

我可能遗漏了什么？

Answer 1

你说过：

index.md和feature.png是同一目录中的同级。

但是你的gatsby-source-filesystem显示了两个不同的文件夹：

{解析：gatsby-source-filesystem，选项：{路径：${\_\_dirname}/content/blog，名称：blog，}，}，{解析：gatsby-source-filesystem，选项：{名称：images，路径：${\_\_dirname}/src/images，}，}

Gatsby似乎无法为您的映像创建适当的节点，因为它无法在您的文件系统中找到它。

我建议遵循您的gatsby-source-filesystem方法，因此，一个文件夹用于帖子(markdowns)，另一个文件夹用于图像。当然，这两个文件夹可以是兄弟文件夹，但是，您的markdown结构应该如下所示：

---
title: My pst with a feature image
date: "2021-05-16T09:45:00.000Z"
description: "Some cool post with a feature image"
tags: [demo]
featuredImage: "../feature.png"
---