我正在使用 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
---
盖茨比-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`
]
盖茨比-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,
},
})
})
})
}