gatsby.js 中的缩略图问题

Posted 2023-03-08

【中文标题】gatsby.js 中的缩略图问题

【英文标题】：Problem with thumbnail images in gatsby.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.

感谢您的帮助！

【参考方案1】：

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