Javascript gatsby.js中的缩略图问题

Javascript gatsby.js中的缩略图问题,javascript,graphql,Javascript,Graphql,我想为我的Gatby.js博客上的每一篇文章显示特定的缩略图。我用盖茨比的图像来做这个。但我得到了这个错误: 37:11错误无法查询类型“MarkdownRemarkFrontmatter”上的字段“timage”。你是说“头衔”吗?graphql/模板字符串 ✖ 4个问题(1个错误,3个警告) GraphQL错误遇到1个错误: -类型“MarkdownRemarkFrontmatter”上的未知字段“timage” 文件:C:/Users/mikol/piec/src/pages/index.

我想为我的Gatby.js博客上的每一篇文章显示特定的缩略图。我用盖茨比的图像来做这个。但我得到了这个错误:

37:11错误无法查询类型“MarkdownRemarkFrontmatter”上的字段“timage”。你是说“头衔”吗?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

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.


发布文件的代码:

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

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.



谢谢你的帮助

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