Question

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

37:11错误无法查询类型“ MarkdownRemarkFrontmatter”上的字段“ timage”。您是说“标题”吗？ graphql / template-strings

✖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.

感谢您的帮助！

Answer 1

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

gatsby.js中的缩略图问题

1 个答案: