Question

我正在用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
            }
          }
        }
      }
    }
  }
`

谢谢！

Answer 1

我刚遇到这个问题。通过控制台日志，我看到如果未设置图像，featured_image返回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
}

如果未设置特色图片，盖茨比会出错

1 个答案: