Gatsby “字段”；“图像”；不能有自类型“起的选择”；“字符串”；没有子字段我错过了什么？

像许多人一样，我想做的就是能够使用NetlifyCMS的简单gastby博客。有一秒钟，我能得到一个图像出现，但此后再也没有出现过。我在其他帖子中尝试了无数的解决方案，但我一无所获。现在已经三天了

我有一个共同点：

Field "image" must not have a selection since type "String" has no subfields

有人能看看我的代码，看看我是否遗漏了什么吗

config.yml

backend:
  name: github
  branch: development
  repo: removedforworkreasons

media_folder: static/img
public_folder: /img

collections:
  - name: blog
    label: Blog
    folder: src/posts
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: description, label: Description }
      - { name: image, label: Image, widget: image }
      - { name: body, label: Body, widget: markdown }

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `removedforwork`,
    description: `removedforwork`,
    author: `removed`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-remove-serviceworker`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `img`,
        path: `${__dirname}/static/img`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/posts`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-relative-images`,
            options: {
              // [Optional] The root of "media_folder" in your config.yml
              // Defaults to "static"
              staticFolderName: "static",
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets/,
        },
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    `gatsby-plugin-netlify-cms`,
    `gatsby-plugin-netlify`,
  ],
}

gatsby-node.js（不妨加入）

显示所有博客文章的页面（不是模板） pages/blog.js

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"

import Layout from "../components/layout/layout"

import Img from 'gatsby-image'

const Blog = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              title
              date
              image {
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  return (
    <>
      <Layout>
        <main className="main">
          <div className="articles">
            <h1 className="articles__title">Articles</h1>
            <section className="articles__list">
              {data.allMarkdownRemark.edges.map(edge => {
                return (
                  <a className="articles__article">
                    <div className="articles__article-artwork">
                      <figure className="articles__article-artwork-wrapper">
                        <Img fluid={edge.node.frontmatter.image.childImageSharp.fluid} />
                      </figure>
                    </div>
                    <h2 className="articles__article-title">
                      <Link to={`/blog/${edge.node.fields.slug}`}>
                        {edge.node.frontmatter.title}
                      </Link>
                    </h2>
                    <Link>
                      <p>{edge.node.frontmatter.date}</p>
                    </Link>
                    <div className="articles__article-description">
                      <p></p>
                    </div>
                    <span className="articles__article-more">Read more...</span>
                  </a>
                )
              })}
            </section>
          </div>
        </main>
      </Layout>
    </>
  )
}
export default Blog

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout/layout"

import Img from 'gatsby-image'

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
      html
    }
  }
`

const Blog = props => {
  return (
    <Layout>
      <main className="main">
        <div className="article-page">
          <header className="article-page__header">
            <div className="article-page__header-inner">
              <h1 className="article-page__title">
                {props.data.markdownRemark.frontmatter.title}
              </h1>
            </div>
          </header>
         <Img fluid={props.data.markdownRemark.frontmatter.image.childImageSharp.fluid} />
          <p>{props.data.markdownRemark.frontmatter.date}</p>
          <section className="article-page">
            <div className="articles-page__inner">
              <div
                className="article-page__content"
                dangerouslySetInnerHTML={{
                  __html: props.data.markdownRemark.html,
                }}
              ></div>
            </div>
          </section>
        </div>
      </main>
    </Layout>
  )
}

export default Blog

从“React”导入React
从“盖茨比”导入{Link，graphql，useStaticQuery}
从“./组件/布局/布局”导入布局
从“盖茨比图像”导入Img
const Blog=（）=>{
常量数据=useStaticQuery（graphql`
质疑{
所有的标记{
边缘{
节点{
前沿物质{
标题
日期
形象{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
}
田地{
鼻涕虫
}
}
}
}
}
`)
返回(
文章
{data.allMarkdownRemark.edges.map（edge=>{
返回(
{edge.node.frontmatter.title}
{edge.node.frontmatter.date}


阅读更多。。。
)
})}
)
}
导出默认博客

模板/blog.js

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"

import Layout from "../components/layout/layout"

import Img from 'gatsby-image'

const Blog = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              title
              date
              image {
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  return (
    <>
      <Layout>
        <main className="main">
          <div className="articles">
            <h1 className="articles__title">Articles</h1>
            <section className="articles__list">
              {data.allMarkdownRemark.edges.map(edge => {
                return (
                  <a className="articles__article">
                    <div className="articles__article-artwork">
                      <figure className="articles__article-artwork-wrapper">
                        <Img fluid={edge.node.frontmatter.image.childImageSharp.fluid} />
                      </figure>
                    </div>
                    <h2 className="articles__article-title">
                      <Link to={`/blog/${edge.node.fields.slug}`}>
                        {edge.node.frontmatter.title}
                      </Link>
                    </h2>
                    <Link>
                      <p>{edge.node.frontmatter.date}</p>
                    </Link>
                    <div className="articles__article-description">
                      <p></p>
                    </div>
                    <span className="articles__article-more">Read more...</span>
                  </a>
                )
              })}
            </section>
          </div>
        </main>
      </Layout>
    </>
  )
}
export default Blog

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout/layout"

import Img from 'gatsby-image'

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
      html
    }
  }
`

const Blog = props => {
  return (
    <Layout>
      <main className="main">
        <div className="article-page">
          <header className="article-page__header">
            <div className="article-page__header-inner">
              <h1 className="article-page__title">
                {props.data.markdownRemark.frontmatter.title}
              </h1>
            </div>
          </header>
         <Img fluid={props.data.markdownRemark.frontmatter.image.childImageSharp.fluid} />
          <p>{props.data.markdownRemark.frontmatter.date}</p>
          <section className="article-page">
            <div className="articles-page__inner">
              <div
                className="article-page__content"
                dangerouslySetInnerHTML={{
                  __html: props.data.markdownRemark.html,
                }}
              ></div>
            </div>
          </section>
        </div>
      </main>
    </Layout>
  )
}

export default Blog

从“React”导入React
从“盖茨比”导入{graphql}
从“./组件/布局/布局”导入布局
从“盖茨比图像”导入Img
export const query=graphql`
查询（$slug:String！）{
markdownRemark（字段：{slug:{eq:$slug}}）{
前沿物质{
标题
日期
形象{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
}
html
}
}
`
const Blog=props=>{
返回(
{props.data.markdownRemark.frontmatter.title}
{props.data.markdownRemark.frontmatter.date}

)
}
导出默认博客

这对我来说太残酷了。我想我需要另一双眼睛来指出我做过的一些愚蠢的事情，但这似乎是盖茨比和netlifycms的共同问题

---

提前感谢

此错误有多个来源：

• 检查图像的拼写：如果您正在查询

  abc.jpg

  ，并且您的图像名为

  def.jpg

  Gatsby将默认情况下将缺少的图像字段解析为字符串。对于丢失的图像，以及错误的路径或格式图像类型（

  jpg

  ，

  png

  ，等等），也会发生同样的情况

• 如果您的图像不是同级，或者换句话说，与JSON文件位于同一文件夹中，则适当的插件将它们解析为字符串，因为它实际上不“知道”文件的位置
  否则，它会将文件解析为文件节点。您可以通过发布

  gatsby develope

  ，open

  http://localhost:8000/___graphql

  ，在文档的右侧，遍历节点的层次结构。您将看到这实际上是一个字符串，但如果您将图像移动到同一文件夹并进行必要的调整，请发出

  gatsby clean

  以清除所有缓存项，然后重新发出

  gatsby develope

  并打开一个新窗口以

  http://localhost:8000/___graphql

  ，您将看到，现在该项实际上是一个文件节点

资源：

---

对于任何正在寻找解决方案的人来说，将

盖茨比评论相对图像

降级到0.3.0版对我来说是可行的：

npm i gatsby-remark-relative-images@0.3.0

不要忘记在

gatsby node.js的
onCreateNode
中添加对
fmImagesToRelative
的调用：

const{fmImagesToRelative}=require（“盖茨比备注相对图像”）；
// ...
exports.onCreateNode=（{node，actions，getNode}）=>{
fmImagesToRelative（node）；//谢谢，Ferran。不幸的是，我仍然没有任何效果。此时，我正在拖一个项目太长时间。此时可能需要放弃netlify cms。图像格式是什么？