盖茨比 - 无法读取 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 &amp;&amp; &lt;Img fluid=frontmatter.cover.childImageSharp.fluid /&gt; ,但我根本没有得到图像。 因为您的 MDX 没有任何封面属性,至少在您的示例中是这样。 你能解释一下吗?【参考方案2】:

奇怪的答案,但 gatsby clean 我已经设法解决了这个问题。

【讨论】:

以上是关于盖茨比 - 无法读取 null 的属性“childImageSharp”的主要内容,如果未能解决你的问题,请参考以下文章

...GatsbySanityImageFluid - 无法读取 null 的属性“流体”

可选字段图像和 'childImageSharp' 为 null |盖茨比、GraphQL 和 YAML

WordPress 盖茨比

盖茨比 EACCES:权限被拒绝

无法读取 null 的属性(读取“类型”)

TypeError:无法读取 null 的属性(读取“发射”)