如何解决Gatsby - 无法读取 null 的属性“childImageSharp”
即使我的查询在 GraphQL Explorer 中给出了正确的结果,我也收到了这个错误。
有很多博客文章和相同的问题,但我没有找到可以解决此错误的正确答案。
错误:TypeError:无法读取 null 的属性“childImageSharp”
这是我迄今为止尝试过的:
Mdx
---
title: Hello World - from mdx!
date: 2019-06-01
published: true
tags: ['react','javascript']
---
Gatsby 组件
const Blog = ({ data }) => {
const tags = data.allMdx.group
const posts = data.allMdx.nodes
return (
<Layout>
<div className="hero blog-section">
<div className="hero-body">
<div className="container">
<h1 className="home-title is-size-1">Blog</h1>
<h3 className="home-subtitle is-size-4">
Thoughts about programming,design and random stuff
</h3>
<div className="tags"></div>
<div class="tags">
{tags.map(tag => (
<Link
to={`/tags/${kebabCase(tag.fieldValue)}/`}
className="tag is light"
>
{tag.fieldValue}
</Link>
))}
</div>
{posts.map(({ id,excerpt,frontmatter,fields }) => (
<Link to={fields.slug}>
<div key={id} className="card is-fullimage mb-1">
<Img fluid={frontmatter.cover.childImageSharp.fluid} />
<div className="card-stacked">
<div className="card-content">
<time className="home-red">{frontmatter.date}</time>
<h1 className="is-size-4">{frontmatter.title}</h1>
<p>{excerpt}</p>
<span className="home-red">
{fields.readingTime.text}
</span>
</div>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
</Layout>
)
}
export const query = graphql`
query SITE_INDEX_QUERY {
allMdx(
sort: { fields: [frontmatter___date],order: DESC }
filter: { frontmatter: { published: { eq: true } } }
) {
group(field: frontmatter___tags) {
fieldValue
}
nodes {
id
excerpt(pruneLength: 100)
frontmatter {
tags
title
date(formatString: "MM/DD/YYYY")
cover {
publicURL
childImageSharp {
fluid(maxWidth: 2000,traceSVG: { color: "#639" }) {
tracedSVG
}
}
}
}
fields {
slug
readingTime {
text
}
}
}
}
}
`
gatsby-config.js
module.exports = {
siteMetadata: {
title: `Lorem Ipsum Blog`,description: `Lorem ipsum.`,},plugins: [
{
resolve: `gatsby-source-filesystem`,options: {
path: `${__dirname}/src/images`,name: `images`,{
resolve: `gatsby-source-filesystem`,options: {
path: `${__dirname}/posts`,name: `posts`,{
resolve: `gatsby-plugin-mdx`,options: {
extensions: [`.mdx`,`.md`],{
resolve: `gatsby-transformer-remark`,options: {
plugins: [
{
resolve: `gatsby-remark-images`,options: {
maxWidth: 630,],`gatsby-transformer-sharp`,`gatsby-plugin-sharp`,`gatsby-plugin-sass`,`gatsby-plugin-dark-mode`,`gatsby-plugin-Feed`,`gatsby-remark-reading-time`,}
提前致谢
解决方法
根据您的 MDX:
---
title: Hello World - from mdx!
date: 2019-06-01
published: true
tags: ['react','javascript']
---
您并非在所有帖子中都有封面图片,因此目前您正在请求 frontmatter.cover.childImageSharp.fluid
,您的代码已损坏。在以下位置添加一个简单的条件:
const tags = data.allMdx.group
const posts = data.allMdx.nodes
return (
<Layout>
<div className="hero blog-section">
<div className="hero-body">
<div className="container">
<h1 className="home-title is-size-1">Blog</h1>
<h3 className="home-subtitle is-size-4">
Thoughts about programming,design and random stuff
</h3>
<div className="tags"></div>
<div class="tags">
{tags.map(tag => (
<Link
to={`/tags/${kebabCase(tag.fieldValue)}/`}
className="tag is light"
>
{tag.fieldValue}
</Link>
))}
</div>
{posts.map(({ id,excerpt,frontmatter,fields }) => (
<Link to={fields.slug}>
<div key={id} className="card is-fullimage mb-1">
{frontmatter.cover && <Img fluid={frontmatter.cover.childImageSharp.fluid} /> }
<div className="card-stacked">
<div className="card-content">
<time className="home-red">{frontmatter.date}</time>
<h1 className="is-size-4">{frontmatter.title}</h1>
<p>{excerpt}</p>
<span className="home-red">
{fields.readingTime.text}
</span>
</div>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
</Layout>
)
}
基本上,如果循环帖子没有带有 frontmatter.cover
,请不要打印图像。
{frontmatter.cover && <Img fluid={frontmatter.cover.childImageSharp.fluid} /> }
如果您添加了来自新 ECMAScript 的 Babel plugin for optional chaining,您可以通过以下方式简化它:
<Img fluid={frontmatter?.cover?.childImageSharp?.fluid} />
记住同时使用 gatsby clean
清理缓存。
奇怪的答案,但通过 gatsby clean
我已经设法解决了这个问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。