带有Netlify CMS的盖茨比图像 - 字段"image"不得有选择，因为类型"String"没有子字段

Question

我正在与盖茨比(Gatsby(建立一个博客网站，我正在使用Netlify CMS来管理我的内容。每个博客文章都有一个在FrontMatter中指定的特色图像。

但是，我在获取这些图像以显示。我一直遇到此错误：

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

我尝试添加gatsby-remark-relative-images尝试解决此问题，但这是不起作用的 - 我仍然会遇到相同的错误。

关于如何解决此问题的任何想法？

目录结构

content
 - articles
public
src
static
 - admin
 - images

发布FrontMatter

---
title: Post 1
image: img.png
---

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: `${__dirname}/static/images`,
    }
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `content`,
      path: `${__dirname}/content`,
    }
  },
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-relative-images`,
        },
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 590,
          },
        },
      ],
    },
  },
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`,
  `gatsby-plugin-netlify-cms`,
  `gatsby-plugin-sitemap`
]

gatsby-node.js

const path = require('path');
const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}
exports.createPages = ({actions, graphql}) => {
  const {createPage} = actions;
  return graphql(`{
    allMarkdownRemark {
      edges {
        node {
          html
          id
          frontmatter {
            title
            date
            templateKey
          }
          fields {
            slug
          }
        }
      }
    }
  }`)
  .then(res => {
    if (res.errors) {
      return Promise.reject(res.errors);
    }
    res.data.allMarkdownRemark.edges.forEach(({node}) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve(
          `src/templates/${String(node.frontmatter.templateKey)}.js`
        ),
        context: {
          // Data passed to context is available
          // in page queries as GraphQL variables.
          slug: node.fields.slug,
        },
      })
    })
  })
}

Answer 1

，而@issydennis的回答可能会有所帮助。确保三重检查您的图像路径和名称，如果您在内容定义中设置的图像与实际映像匹配的图像将提示该错误而不是找到该错误。。

Answer 2

我遵循本教程，并获得了最新版本的盖茨比和Netlify。https://blog.rousek.name/2018/08/10/cool-image-loading-with-gatsbyjs-v2-and-netlify-cms-v2/。基本上，您需要使用Gatsby-Plugin-Netlify-CMS路径。这将允许GraphQl能够查询图像，因为在NetLify上，图像字段是一种字符串。插件作者的引文说："使用NetLify CMS编辑它们时，可以将Markdown Files中的文件路径更改为对盖茨比友好的路径的盖茨比插件。"

另外，如果您仍然更喜欢使用盖茨比符号相关图像，则需要添加

// gatsby-node.js
 const { fmImagesToRelative } = require('gatsby-remark-relative-images');
  exports.onCreateNode = ({ node }) => {
  fmImagesToRelative(node);
  };

Answer 3

尝试使用：

来清除缓存

gatsby clean

，然后再次运行Dev Server。

与您使用相同的设置时，我通常会随机遇到此错误。清除缓存并重新启动通常将其修复。

Answer 4

最容易直接转到 gatsby-plugin-netlify-cms-paths

的盖茨比文档

https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms-paths/

一个警告，...您的config.yml文件应同时指定media_folder和public_folder。但是，根据Netlify CMS文档：

如果未设置public_folder，则NETLIFY CMS默认值为与Media_folder，添加一个开口/如果不包括一个。

让Netlify CMS执行默认操作，我的初始NetLify build在安装和配置插件失败的情况下会出现以下错误：

错误在Netlify CMS配置中缺少public_folder

手动将public_folder添加到我的config.yml文件时，我没有其他问题。