1

我对 gatsbyJS 有以下错误：字段“缩略图”不能有选择，因为类型“字符串”没有子字段。

我已经尝试在我的 gatsby 配置文件中更改我的插件的顺序。当我去：http://127.0.0.1:8000/__graphql并这样做：

  query {
    profilePicture: file(absolutePath: { regex: "img/profile_picture.png/" })
    logoCreditAgricole: file(absolutePath: { regex: "img/logo-credit-agricole.png/" })
    site {
      siteMetadata {
        author
        social {
          twitter
        }
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { template: { eq: "project" } } }
      ) {
      edges{
        node{
          excerpt
          fields{
            slug
          }
          frontmatter{
            date(formatString: "MMMM DD, YYYY")
            title
            thumbnail
          }
        }
      }
    }
  }

我必须删除

      childImageSharp {
        fluid(maxWidth: 100) {
          ...GatsbyImageSharpFluid
        }
      }

让它发挥作用

这是我的页面查询：

export const pageQuery = graphql`
  query {
    profilePicture: file(absolutePath: { regex: "img/profile_picture.png/" }) {
      childImageSharp {
        fluid(maxWidth: 700) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    logoCreditAgricole: file(absolutePath: { regex: "img/logo-credit-agricole.png/" }) {
      childImageSharp {
        fluid(maxWidth: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    site {
      siteMetadata {
        author
        social {
          twitter
        }
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { template: { eq: "project" } } }
      ) {
      edges{
        node{
          excerpt
          fields{
            slug
          }
          frontmatter{
            date(formatString: "MMMM DD, YYYY")
            title
            thumbnail {
              childImageSharp {
                fluid(maxWidth: 700) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
`

我的 gatsbyconfig ：

module.exports = {
  siteMetadata: {
    title: `Florent Vandroy`,
    author: `Florent Vandroy`,
    description: `Développeur web indépendant dans le secteur de Bergerac. Disponible pour la création ou modification de votre site web.`,
    siteUrl: `http://127.0.0.1:8000/`,
    social: {
      twitter: `alisalahio`,
    },
    projects: [
      {
        title: `Gatsby Starter Blog & Portfolio!`,
        description: `Gatsby official starter with portfolio section added!`,
        url: `https://gatsby-starter-blog-and-portfolio.netlify.com/`,
        moreLinks: [
          {
            type: `Github`,
            url: `https://github.com/alisalahio/gatsby-starter-blog-and-portfolio`,
          },
        ],
      },
      {
        title: `React`,
        description: `React's homepage is created with Gatsby!`,
        url: `https://reactjs.org/`,
      },
    ],
  },
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },    
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/project`,
        name: `project`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/gatsby-icon.png`,
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-sass`
  ],
}

我在 /content/project/index.md 中的 index.md 文件：

---
title: Hello World
date: "2015-05-01T22:12:03.284Z"
template: "project"
thumbnail: "/cashprono.png"
---

感谢所有愿意帮助我的人。

4

1 回答 1

1

此错误有多个来源：

  • 检查图像的拼写：如果您正在查询 anabc.jpg并且您的图像名为def.jpgGatsby，则默认情况下会将缺少的图像字段解析为字符串。丢失图像以及错误（使用点检查路径的相对性）路径或格式图像类型（ , 等）也会发生同样的jpg情况png。

  • 如果您的图像不是同级图像，或者换句话说，与 JSON 文件位于同一文件夹中，则适当的插件会将它们解析为字符串，因为它实际上并不“知道”文件所在的位置。换句话说，您的图像应该位于唯一图像文件夹中。

    否则，它将文件解析为文件节点。您可以通过发出gatsby develop, open来确认这一点http://localhost:8000/___graphql，在右侧，在文档上，遍历节点的层次结构。你会看到它实际上是一个字符串，但是如果你将图像移动到同一个文件夹并进行必要的调整，发出gatsby clean清除所有缓存的项目并重新发出gatsby develop并打开一个新窗口http://localhost:8000/___graphql，你会看到现在的项目实际上是一个文件节点。

资源：

于 2020-11-26T19:59:34.840 回答