盖茨比 - 无法读取 null 的属性“childImageSharp”
Posted
技术标签:
【中文标题】盖茨比 - 无法读取 null 的属性“childImageSharp”【英文标题】:Gatsby - Cannot read property 'childImageSharp' of null 【发布时间】:2021-04-09 16:25:14 【问题描述】:即使我的查询在 GraphQL Explorer 中为我提供了正确的结果,我也会收到此错误。
我正在尝试为文章加载封面图片,但看不到哪里出错。
有很多博客文章和相同的问题,但我没有找到可以解决此错误的正确答案。
错误:TypeError:无法读取 null 的属性“childImageSharp”
这是我迄今为止尝试过的:
Mdx
---
title: Hello World - from mdx!
date: 2019-06-01
published: true
tags: ['react', 'javascript']
---
盖茨比组件
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`,
],
提前致谢
【问题讨论】:
【参考方案1】:根据您的 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
清理缓存。
【讨论】:
我已经尝试过这种方法:frontmatter.cover && <Img fluid=frontmatter.cover.childImageSharp.fluid />
,但我根本没有得到图像。
因为您的 MDX 没有任何封面属性,至少在您的示例中是这样。
你能解释一下吗?【参考方案2】:
奇怪的答案,但 gatsby clean
我已经设法解决了这个问题。
【讨论】:
以上是关于盖茨比 - 无法读取 null 的属性“childImageSharp”的主要内容,如果未能解决你的问题,请参考以下文章
...GatsbySanityImageFluid - 无法读取 null 的属性“流体”