Question

我正在与Gatsby建立博客，我试图在每个帖子页面上显示英雄图像，并在每个帖子的前部内容中定义图像路径。但是，我从英雄组件中收到了此错误：

TypeError: Cannot read property 'image' of undefined

这是我的代码：

发布前沿问题

---
path: /blog-post1
title: Blog Post 1
image: ../../images/blog-post-1.jpg
description: Blog post description
---

Hero.js

import React from 'react'
import Img from "gatsby-image";

const Hero = props => (
  <section className="hero is-large">
    <Img
       fluid={props.frontmatter.image.childImageSharp.resize}
     />
     <div className="hero-body">
     </div>
  </section>
);

export default Hero

Post.js

import React from 'react';
import { graphql } from 'gatsby';

import Layout from '../components/layout';
import Hero from '../components/hero';

const PostTemplate = ({ data }) => {
  const { markdownRemark } = data;
  const { frontmatter, html } = markdownRemark;
  return (
    <Layout>

      <Hero headerImage={frontmatter.image} />

      <section class="section">
        <div className="container is-medium">
          <div dangerouslySetInnerHTML={{__html: html}} />
        </div>
      </section>

    </Layout>
  )
}

export default PostTemplate;

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date
        path
        title
        description
        image {
          childImageSharp {
            resize(width: 1500, height: 1500) {
              src
            }
            fluid(maxWidth: 786) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`;

有什么想法吗？预先感谢。

Answer 1

我假设您一直都在frontmatter变量中有数据。如果您看一下如何调用Hero Component，您将在其中将数据作为headerImage传递。

 <Hero headerImage={frontmatter.image} />

如果您查看Hero组件，则将其阅读为 frontmatter 。您可以进行以下更改并检查。

您可以将条件添加到Img组件中，以避免由于缺少数据而导致错误。

{ 
   props.headerImage && props.headerImage.image && props.headerImage.image.childImageSharp
    <Img
       fluid={props.headerImage.image.childImageSharp.resize}
    />
}

Answer 2

我发现是问题所在。

在我的hero.js中，我使用{props.frontmatter.image.childImageSharp.resize}

调用了图像

但是在我的post.js中，我正在将数据传递到类似<Hero headerImage={frontmatter.image} />的hero组件中

因此，它正在尝试查找不存在的frontmatter.image.image。我要做的就是像这样.image

移除<Img fluid={props.headerImage.childImageSharp.resize} />

盖茨比：尝试从最前面的事物获取图像路径，但得到此“ TypeError：无法读取未定义的属性'image'”

2 个答案: