如何解决如何修复NetlifyCMS构建上的“ TypeError：childImageSharp未定义”？
我正在现有的gatsby网站上建立一个简单的博客页面，我希望使用netlify cms的人能够上传该博客文章的缩略图。我设法做到了，并使用graphigl定位了它
现在我想将其设置到我的博客文章页面：
def table(n):
for limit in range(1,n+1):
s = ""
for i in range(1,limit):
for j in range(1,limit):
s += f"{i*j}\t"
s += "\n"
print(s)
table(6)
#1
#1 2
#2 4
#1 2 3
#2 4 6
#3 6 9
#1 2 3 4
#2 4 6 8
#3 6 9 12
#4 8 12 16
#1 2 3 4 5
#2 4 6 8 10
#3 6 9 12 15
#4 8 12 16 20
#5 10 15 20 25
然后在netlify上重新部署时出现这些错误。
config.yml
import React from "react"
import { Link,graphql,useStaticQuery } from "gatsby"
import Layout from "../components/layout/layout"
const Blog = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
title
date
thumbnail {
childImageSharp {
fluid(maxWidth: 400) {
src
}
}
}
}
fields {
slug
}
}
}
}
}
`)
return (
<>
<Layout>
<main className="main">
<div className="articles">
<h1 className="articles__title">Articles</h1>
{data.allMarkdownRemark.edges.map(edge => {
return (
<section className="articles__list">
<a className="articles__article">
<div className="articles__article-artwork">
<figure className="articles__article-artwork-wrapper">
{edge.node.frontmatter.thumbnail.childSharpImage.fluid.src}
</figure>
</div>
<h2 className="articles__article-title">
<Link to={`/blog/${edge.node.fields.slug}`}>
{edge.node.frontmatter.title}
</Link>
</h2>
<Link>
<p>{edge.node.frontmatter.date}</p>
</Link>
<div className="articles__article-description">
<p></p>
</div>
<span className="articles__article-more">Read more...</span>
</a>
</section>
)
})}
</div>
</main>
</Layout>
</>
)
}
export default Blog
gatsby-node.js
backend:
name: github
branch: development
repo: (removed for work reasons)
media_folder: static/img
public_folder: img
collections:
- name: "blog"
label: "Blog"
folder: "src/posts"
create: true
slug: "{{slug}}"
fields:
- {label: "Layout",name: "layout",widget: "hidden",default: "blog"}
- {label: "Title",name: "title",widget: "string"}
- {label: "Publish Date",name: "date",widget: "datetime"}
- {label: "Body",name: "body",widget: "markdown"}
- {label: "Image",name: "thumbnail",widget: "image"}
gatsby-config.js
const path = require('path')
module.exports.onCreateNode = ({ node,actions }) => {
const { createNodeField } = actions
if (node.internal.type === "MarkdownRemark") {
const slug = path.basename(node.fileAbsolutePath,'.md')
createNodeField({
node,name: 'slug',value: slug
})
}
}
module.exports.createPages = async ({ graphql,actions}) => {
const { createPage } = actions
const blogTemplate = path.resolve('./src/templates/blog.js')
const res = await graphql(`
query {
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`)
res.data.allMarkdownRemark.edges.forEach((edge) => {
createPage({
component: blogTemplate,path: `/blog/${edge.node.fields.slug}`,context: {
slug: edge.node.fields.slug
}
})
})
}
老实说，使用netlify cms向我现有的gatsby网站添加博客页面会很容易，但这一直是我尝试过的最困难的事情之一。
非常感谢您的帮助。
谢谢
解决方法
我有些奇怪的事情。
-
您的查询无法正常工作（因此，破坏了代码），因为它找不到您的图片。将您的
config.yml媒体路径更改为：media_folder: static/img public_folder: /img请注意
/路径中的斜杠（public_folder）。这是因为它是相对路径，必须以斜杠开头。 From Netlify docs（斜杠部分）：
公共文件夹
此设置为必需。
public_folder选项指定文件所在的文件夹路径 相对于基础，将访问媒体库上传的内容 建造场所。对于[file]或[image]小部件控制的字段， 该字段的值是通过将该路径添加到 所选文件的文件名。默认为media_folder的值， 如果没有一个/，则以空缺开头。public_folder: "/images/uploads"根据上述设置，如果用户使用了图像小部件字段 称为
avatar以上传并选择名为philosoraptor.png的图像， 图像将保存到存储库中/static/img/philosoraptor.png，以及 文件将设置为/img/philosoraptor.png。
您的media_folder看起来不错。
-
在
<figure>标签内渲染图像的方式。按照您的方法，它将渲染带有图像路径的字符串，但是，您使用的是gatsby-image中的锐笔，但您没有使用它。在一些试验中，我建议进行以下操作：<figure> <Img fluid={edges.node.frontmatter.thumbnail.childImageSharp.fluid}> </figure>按照
gatsby-image方法，您还应该使用类似以下的查询片段：const data = useStaticQuery(graphql` query { allMarkdownRemark { edges { node { frontmatter { title date thumbnail { childImageSharp { fluid(maxWidth: 400) { ...GatsbyImageSharpFluid } } } } fields { slug } } } } } `)注意
...GatsbyImageSharpFluid片段以获取使用gatsby-image所需的所有数据。 -
您正在使用
staticQuery，但您不需要它，因为所有数据都来自CMS。您应该使用page/template query来提高性能，但这会改变您的页面结构。在Gatsby中创建动态页面的“标准”方法是使用
gatsby-node.js使用createPageAPI，将所需的数据传递到模板（通常是id或{{1 }}），并使用该唯一数据来检索博客/帖子信息。您正在通过上下文传递
slug，但从未使用过：slug此外，您还会使用静态查询（
context: { slug: edge.node.fields.slug }）遍历所有文章，这是没有意义的，浪费时间和性能。您的
allMarkdownRemark模板应类似于：Blog请注意，您将传递子段（
import React from 'react' import { graphql } from 'gatsby' const Blog = ({data}) => { return ( <div> Blog title is: {data.markdownRemark.frontmatter.title} </div> ) } export const query = graphql` query BlogQuery($slug: String!) { query { markdownRemark(fields: { slug: { eq: $slug }}) { html frontmatter { title date thumbnail { childImageSharp { fluid(maxWidth: 400) { ...GatsbyImageSharpFluid } } } } fields { slug } } } } ` export default Blog）作为必需参数（$slug），因此页面查询不能为null。之后，您将过滤markdown节点（String!），以获得与您在markdownRemark文件中传递的上下文匹配的节点。换句话说，在这种情况下，您拥有每个帖子的数据。还要注意，您可能需要更改查询以匹配您的数据结构，我已经从头开始发布了它，但不知道您的字段。使用
gatsby-node.js（GraphQL游乐场）进行检查。由于这是GraphQL的局限性，因此您的片段无法在其中使用，但可以在您的代码上使用，因此请避免在此处使用它，而将其保留在您的代码中。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
