Netlify CMS图片在Gatsby/GraphQL中异常，请求配置验证

我不确定配置哪里出了问题，查了所有相关教程，但GraphQL就是没法正确获取图片。

我的config.yml配置 #

backend:
    name: git-gateway
    branch: master

local_backend:
    url: http://localhost:8082/api/v1
    allowed_hosts: ['192.168.0.1']

media_folder: static/img
public_folder: /img

collections:
    - name: 'music'
      label: 'music'
      folder: 'content/music'
      create: true
      slug: 'index'
      media_folder: '/'
      public_folder: '/'
      editor:
          preview: false
      fields:
          - { label: 'Title', name: 'title', widget: 'string' }
          - { label: 'Release Date', name: 'date', widget: 'datetime' }
          - { label: 'Artwork', name: 'image', widget: 'image' }
          - { label: 'Spotify Url', name: 'spotify', widget: 'string' }

gatsby-config.js相关配置 #

{
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `music`,
        path: `${__dirname}/content/music `,
    },
},
`gatsby-plugin-styled-components`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
    resolve: 'gatsby-transformer-remark',
    options: {
        plugins: [
            'gatsby-remark-images',
            {
                resolve: 'gatsby-remark-images',
                options: {
                    maxWidth: 2048,
                },
            },
        ],
    },
},
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-netlify-cms-paths`,

GraphQL查询语句 #

{
  music: allFile(filter: {sourceInstanceName: {eq: "music"}}) {
    edges {
      node {
        id
        childImageSharp {gatsbyImageData}
        childMarkdownRemark {
          frontmatter {
            title
          
            image
          }
        }
      }
    }
  }
}

目录结构 #

content/music/hell-made-me-stable/index.md
content/music/hell-made-me-stable/image.jpg

查询返回结果 #

{
  "data": {
    "music": {
      "edges": [
        {
          "node": {
            "id": "576e6d54-f3aa-5b51-b35c-682fed8a820c",
            "childImageSharp": null,
            "childMarkdownRemark": {
              "frontmatter": {
                "title": "Hell Made Me STable",
                "image": "hell-made-me-stable.jpg"
              }
            }
          }
        },
        {
          "node": {
            "id": "2701fc19-6251-5a4d-8316-d24a590313af",
            "childImageSharp": {
              "gatsbyImageData": {
                "layout": "constrained",
                "backgroundColor": "#080808",
                "images": {
                  "fallback": {
                    "src": "/static/2a129588a0917df3df5e0d89954a9916/5a7c3/hell-made-me-stable.jpg",
                    "srcSet": "/static/2a129588a0917df3df5e0d89954a9916/f505e/hell-made-me-stable.jpg 250w,\n/static/2a129588a0917df3df5e0d89954a9916/be5ed/hell-made-me-stable.jpg 500w,\n/static/2a129588a0917df3df5e0d89954a9916/5a7c3/hell-made-me-stable.jpg 1000w",
                    "sizes": "(min-width: 1000px) 1000px, 100vw"
                  },
                  "sources": [
                    {
                      "srcSet": "/static/2a129588a0917df3df5e0d89954a9916/e7160/hell-made-me-stable.webp 250w,\n/static/2a129588a0917df3df5e0d89954a9916/5f169/hell-made-me-stable.webp 500w,\n/static/2a129588a0917df3df5e0d89954a9916/3cd29/hell-made-me-stable.webp 1000w",
                      "type": "image/webp",
                      "sizes": "(min-width: 1000px) 1000px, 100vw"
                    }
                  ]
                },
                "width": 1000,
                "height": 1000
              }
            },
            "childMarkdownRemark": null
          }
        }
      ]
    }
  },
  "extensions": {}
}

我期望childImageSharp出现在包含childMarkdownRemark的节点中，但现在两者是分开的两个节点。

1. 修正Netlify CMS媒体路径配置 #

当前music集合的public_folder: '/'会让frontmatter里的图片字段只保留文件名，Gatsby无法自动关联同目录下的Markdown和图片。修改为相对路径配置：

collections:
    - name: 'music'
      # 其他配置不变
      media_folder: '/'
      public_folder: './'

这样Netlify CMS会生成./hell-made-me-stable.jpg的相对路径，帮助Gatsby识别资源关联。

2. 修复文件系统源路径的空格错误 #

gatsby-source-filesystem的path末尾多了一个空格，导致路径识别异常，去掉空格：

{
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `music`,
        path: `${__dirname}/content/music`,
    },
},

3. 优化GraphQL查询结构 #

Gatsby会把Markdown和图片作为独立的File节点处理，需要通过路径关联两者。改用allMarkdownRemark查询并关联图片：

{
  allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/content/music/"}}) {
    edges {
      node {
        frontmatter {
          title
          image
        }
        # 通过父节点获取同目录下的图片
        parent {
          ... on File {
            dir
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  }
}

或者通过相对目录匹配图片节点，在代码中手动关联Markdown和图片。

4. 移除重复的插件配置 #

gatsby-transformer-remark里重复添加了gatsby-remark-images，可能导致冲突，保留一个即可：

{
    resolve: 'gatsby-transformer-remark',
    options: {
        plugins: [
            {
                resolve: 'gatsby-remark-images',
                options: {
                    maxWidth: 2048,
                },
            },
        ],
    },
},

内容的提问来源于stack exchange，提问作者speedydev