带有 Netlify CMS 的 Gatsby 图像 - 字段“图像”不能有选择，因为类型“字符串”没有子字段

Posted 2023-03-08

【中文标题】带有 Netlify CMS 的 Gatsby 图像 - 字段“图像”不能有选择，因为类型“字符串”没有子字段

【英文标题】：Gatsby Image with Netlify CMS - Field "image" must not have a selection since type "String" has no subfields

【发布时间】：2019-10-03 00:33:18

【问题描述】：

我正在使用 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

发布前言

---
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,
        ,
      )
    )

  )

【问题讨论】：

嘿@taylor018，由于您使用的是netlifyCMS，您是否使用图像小部件来选择和上传图像？如果是这样，您会在config.yml 中分享相关部分吗？

【参考方案1】：

最容易直接访问 gatsby-plugin-netlify-cms-paths 的 Gatsby 文档

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 构建失败并出现以下错误：

Netlify CMS 配置中缺少 public_folder 错误

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

【参考方案2】：

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

【参考方案3】：

尝试使用以下命令清除缓存：

gatsby clean

然后再次运行开发服务器。

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

【参考方案4】：

我遵循本教程并成功使用了最新版本的 Gatsby 和 netlify。 https://blog.rousek.name/2018/08/10/cool-image-loading-with-gatsbyjs-v2-and-netlify-cms-v2/。 基本上你需要使用 gatsby-plugin-netlify-cms-paths。 这将允许 Graphql 能够查询图像，因为在 Netlify 上，图像字段是一种字符串。 插件作者的一句话说： “一个 gatsby 插件，用于在使用 Netlify CMS 编辑文件时将 Markdown 文件中的文件路径更改为 Gatsby 友好的路径。”

或者，如果您仍然喜欢使用 gatsby-remark-relative-images，则需要添加

// gatsby-node.js
 const  fmImagesToRelative  = require('gatsby-remark-relative-images');

  exports.onCreateNode = ( node ) => 
  fmImagesToRelative(node);
  ;