查询netlifycms中的图像在gatsby/graphql中无法进行校正.需要帮助验证配置

Question

我不确定我的配置出了什么问题。我已经阅读了所有关于如何设置的教程。然而，由于某种原因，我的图像在graphql中没有被正确拾取。

这是我的配置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`,

我的查询：

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

image
}
}
}
}
}
}

在我的内容/音乐/中，我只有一个文件夹，但它有两个。我希望childImageSharp位于第一个节点中。

结构如下：联系人/音乐/地狱让我稳定/index.md联系人/音乐/地狱让我稳定下来/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": {}
}

Answer 1

有一些配置对我来说很奇怪：

media_folder: static/img
public_folder: /img

这看起来不错，因为图像将被转换到公用文件夹中，但是，music集合在同一文件中创建两个文件(markdown+image(这一事实是问题的关键，因为edges是两个位置的数组(与childImageSharp和null一起(。

我会删除集合中的以下配置：

media_folder: '/'
public_folder: '/'

此外，为了允许Gatsby解析、转换和锐化图像，您需要在Gatsby-config.js中添加以下内容：

{
resolve: `gatsby-source-filesystem`,
options: {
name: `uploads`,
path: `${__dirname}/static/img`,
},
},

因为它是media_folder中设置的图像的来源。

所有这些都应该创建一个放在contact/music/hell-made-me-stable/index.md的单个标记文件，并将图像放在静态文件夹中，这样您就可以通过标记来指向该图像。