如果未设置特色图片 gatsby 会出错答案

【问题标题】：If featured image is not set gatsby gives error如果未设置特色图片 gatsby 会出错
【发布时间】：2020-01-07 18:36:30
【问题描述】：

我正在使用 gastby 和 wordpress 构建投资组合网站。如果我为它正在工作的网站获取帖子的功能图像，它会显示所有图像。但是，如果我的一篇文章缺少特色图片，我会收到此错误：

TypeError: Cannot read property 'localFile' of null

我找到了this 教程，这个人解决了这个问题，但由于某种原因我没有让它工作。

在索引页面中，我使用了与教程中相同的逻辑 && 运算符方法：

// src/pages/index.js
import React from "react"
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"
const IndexPage = ({ data }) => (

  <Layout>
    <SEO
      title={data.wordpressPage.title}
      description={data.wordpressPage.excerpt}
    />
    <h1>{data.wordpressPage.title}</h1>
    <div dangerouslySetInnerHTML={{ __html: data.wordpressPage.content }} />

    {data.allWordpressPost.edges.map(edge => (
      <Link to={`/post/${edge.node.slug}`} key={edge.node.id}>
//
//
//This should handle the situation if featured image is not set
//
        {edge.node.featured_media.localFile.childImageSharp.fixed && (
          <div>
            <Img
              fixed={edge.node.featured_media.localFile.childImageSharp.fixed}
            />
          </div>
        )}


      </Link>
    ))}
  </Layout>
)
export default IndexPage
export const query = graphql`
  query {
    wordpressPage(title: { eq: "Home" }) {
      title
      excerpt
      content
    }

    allWordpressPost {
      edges {
        node {
          title
          slug
          id
          featured_media {
            localFile {
              childImageSharp {
                fixed(width: 300, height: 300) {
                  ...GatsbyImageSharpFixed
                }
              }
            }
          }
        }
      }
    }
  }
`

我对 BlogPost 文件做了同样的事情：

// src/templates/BlogPostTemplate.js
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"
const BlogPostTemplate = ({ data }) => (
  <Layout>
    <SEO
      title={data.wordpressPost.title}
      description={data.wordpressPost.excerpt}
    />
    <h1>{data.wordpressPost.title}</h1>
    <p>
      Written by {data.wordpressPost.author.name} on {data.wordpressPost.date}
    </p>




    {data.wordpressPost.featured_media.localFile && (
      <div>
        <Img
          fixed={
            data.wordpressPost.featured_media.localFile.childImageSharp.fixed
          }
          alt={data.wordpressPost.title}
          style={{ maxHeight: 450 }}
        />
      </div>
    )}




    <div
      style={{ marginTop: 20 }}
      dangerouslySetInnerHTML={{ __html: data.wordpressPost.content }}
    />
  </Layout>
)
export default BlogPostTemplate
export const query = graphql`
  query($id: Int!) {
    wordpressPost(wordpress_id: { eq: $id }) {
      title
      content
      excerpt
      date(formatString: "MMMM DD, YYYY")
      author {
        name
      }

      featured_media {
        localFile {
          childImageSharp {
            fixed(width: 300, height: 300) {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

提前致谢！

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

我知道这是一个老问题，但我遇到了同样的问题，我只是想为追随我的人发布解决方案。

问题中发布的解决方案是正确的方法。为什么它对@Imlastrebor 不起作用是因为他应该在示例中的 if 语句中省略 .localfile。

像这样：

{data.wordpressPost.featured_media && 
    <Img fixed={data.wordpressPost.featured_media.localFile.childImageSharp.fixed} alt={data.wordpressPost.title} />
}

您也可以将此方法用于用户可能忘记添加内容的任何其他字段。

{data.wordpressPost.content &&

    <p>
        {data.wordpressPost.content}
    </p>

}

【讨论】：

【解决方案2】：

我刚刚遇到了这个问题。通过控制台日志，我看到如果未设置图像，特色图像将返回 NULL。

为了弥补任何给定帖子中缺少图片的情况，我将其写为故障保险。

// Get the value of the featured_media response //
const init_resolution = post.featured_media

// Set resolutions to an empty string variable //
let resolutions = ''

// If init_resolution DOES NOT equal null, then set //
// the resolutions varible to the Graphql result //
// If init_resolution DOES equal null, then the variable 
// will remain empty //

if (init_resolution !== null) {
   resolutions = post.featured_media.localFile.childImageSharp.fixed
}

【讨论】：