我在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"
---
感谢所有愿意帮助我的人。
此错误有多种来源：
-
检查图像的拼写：如果您正在查询
abc.jpg，并且您的图像名为def.jpg，Gatsby将默认情况下将丢失的图像字段解析为字符串。对于丢失的图像，以及错误的(使用点检查路径的相关性(路径或格式图像类型(jpg、png等(，也会发生同样的情况。 -
如果您的图像不是兄弟图像，或者换句话说，与JSON文件位于同一文件夹中，则适当的插件会将它们解析为字符串，因为它实际上并不是"；知道"；文件所在的位置。换句话说，您的图像应该在一个唯一的图像文件夹中。
否则，它将把文件解析为一个文件节点。您可以通过发出
gatsby develop，打开http://localhost:8000/___graphql，然后在右侧的文档中，遍历节点的层次结构来确认这一点。您会看到这实际上是一个字符串，但如果您将图像移动到同一文件夹并进行必要的调整，发出gatsby clean以清除所有缓存的项目，然后重新发出gatsby develop并打开一个新窗口以访问http://localhost:8000/___graphql，您会看到现在该项目实际上是文件节点。
资源：
- https://github.com/gatsbyjs/gatsby/issues/4123
- https://github.com/gatsbyjs/gatsby/issues/13322