gatsby.js 中的缩略图问题答案

【问题标题】：Problem with thumbnail images in gatsby.jsgatsby.js 中的缩略图问题
【发布时间】：2020-01-03 22:00:51
【问题描述】：

我想为我的 Gatby.js 博客上的每篇文章显示特定的缩略图。我为此使用了 gatsby-image。但我得到这个错误：

37:11 错误无法查询类型“MarkdownRemarkFrontmatter”上的字段“timage”。您指的是 “title” 吗? graphql/模板字符串

✖ 4 个问题（1 个错误，3 个警告）

GraphQL 错误遇到 1 个错误： -“MarkdownRemarkFrontmatter”类型上的未知字段“timage”。

文件：C:/Users/mikol/piec/src/pages/index.js

这是我的代码：

index.js：

import React from "react"
import { Link, graphql, StaticQuery } from "gatsby"
import Image from "../components/image"
import SEO from "../components/seo"
import Post from "../components/Post"


const IndexPage = () => (
  <>
   <StaticQuery query={indexQuery} render={data => {
     return (
       <div>
         {data.allMarkdownRemark.edges.map(({ node }) => (
           <Post 
            title={node.frontmatter.title}
            path={node.frontmatter.path}
            body={node.excerpt}
            fluid={node.frontmatter.timage.childImageSharp.fluid}
           />
         ))}
       </div>
     )
   }}/>
  </>
)

const indexQuery = graphql`
query{
  allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }){
    edges{
      node{
        id
        frontmatter{
          title
          path
          date
          timage{
            childImageSharp{
              fluid{
                ...GatbyImageSharpFluid
              }
            }
          }
        }
        excerpt
      }
    }
  }
}
`;

export default IndexPage

gatsby-config.js：

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: `markdown-pages`,
      },
    },
    `gatsby-transformer-remark`,

    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#2B60DE`,
        theme_color: `#2B60DE`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

发布文件的代码：

---
title: "FIrst post - introduction"
date: "2017-11-07"
path: "/first-post"
timage: "../../images/travisscott.jpg"
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel ullamcorper dui. Nam ut aliquam nisi, at rutrum metus. Nunc.

感谢您的帮助！

【问题讨论】：

标签： javascript graphql

【解决方案1】：

我解决了这个问题。我从 Windows 切换到 Ubuntu，它就可以工作了。 #FWindows

【讨论】：