Question

与许多人一样，我要做的就是能够通过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（也可以将其放入）

const path = require('path')

module.exports.onCreateNode = ({ node, actions }) => {
    const { createNodeField } = actions

    if (node.internal.type === "MarkdownRemark") {
        const slug = path.basename(node.fileAbsolutePath, '.md')

        createNodeField({
            node,
            name: 'slug',
            value: slug
        })
    }
}

module.exports.createPages = async ({ graphql, actions}) => {
    const { createPage } = actions
    const blogTemplate = path.resolve('./src/templates/blog.js')
    const res = await graphql(`
        query {
            allMarkdownRemark {
                edges {
                    node {
                        fields {
                            slug
                        }
                    }
                }
            }
        }
    `)

    res.data.allMarkdownRemark.edges.forEach((edge) => {
        createPage({
            component: blogTemplate,
            path: `/blog/${edge.node.fields.slug}`,
            context: {
                slug: edge.node.fields.slug
            }
        })
    })
}

显示所有博客文章的页面（不是模板） 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

templates / blog.js

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

这对我来说是残酷的。我想我只需要另一双眼睛来指出我所做的一些愚蠢的事情，但似乎是gatsby和netlifycms的常见问题。

提前谢谢！

Answer 1

此错误有多种来源：

检查图像的拼写：如果您要查询abc.jpg并且图像名为def.jpg，则默认情况下，Gatsby会将丢失的图像字段解析为字符串。对于丢失的图像，错误的路径或格式的图像类型（jpg，png等），也会如此。
如果您的图像不是兄弟姐妹，或者换句话说，与JSON文件位于同一文件夹中，则相应的插件会将其解析为字符串，因为它实际上并不“知道”文件的位置找到。

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

资源：

Answer 2

对于任何寻求解决方案的人来说，将 gatsby-remark-relative-images 降级到 0.3.0 版对我有用：

npm i gatsby-remark-relative-images@0.3.0

不要忘记在 fmImagesToRelative 的 onCreateNode 中添加对 gatsby-node.js 的调用：

const {fmImagesToRelative} = require("gatsby-remark-relative-images");

// ...

exports.onCreateNode = ({node, actions, getNode}) => {
    fmImagesToRelative(node); // <- this
    // ...
};

字段“ image”不能选择，因为类型“ String”没有子字段。 -我想念什么？

2 个答案: