Передача Гэтсби Изображение как опора - PullRequest
Новая
       25

Передача Гэтсби Изображение как опора

0 голосов
/ 24 октября 2019

Я пытаюсь выучить Гэтсби, создав демо-блог. У меня есть компонент Archive, где я запрашиваю данные блога, и я пытаюсь передать изображение в качестве реквизита, однако, когда я пытаюсь получить доступ к реквизиту в моем компоненте Article, я получаю TypeError: Cannot read property 'childImageSharp' of null.

Вот мой код: 

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

// components
import Article from "./article"

const BLOG_QUERY = graphql`
  {
    allMarkdownRemark {
      nodes {
        excerpt
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          author
          slug
          image {
            childImageSharp {
              fluid(maxWidth: 600) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
        }
        timeToRead
      }
    }
  }
`
const Archive = () => {
  const data = useStaticQuery(BLOG_QUERY)
  console.log(data)
  return (
    <div>
      {data.allMarkdownRemark.nodes.map(node => (
        <Article
          key={node.frontmatter.slug}
          title={node.frontmatter.title}
          excerpt={node.excerpt}
          image={node.frontmatter.image.childImageSharp.fluid}
        />
      ))}
    </div>
  )
}

export default Archive

Уценка заголовка, как показано ниже: 

---
slug: "/what-is-gatsby"
title: "What Is Gatsby?"
image: "../images/gatsby.png"
author: "Joshua Isaac"
date: "2019-10-23"
---

Зарегистрированные данные: enter image description here

Составляющие статьи: 

import { React } from 'react'
import Img from 'gatsby-image'

const Article = (props) => {
 return(
  <div>
    <h3>{props.frontmatter.title}</h3>
    <Img fluid={props.image} />
  </div>

 )
}

1 Ответ

0 голосов
/ 24 октября 2019

Убедитесь, что у каждого из ваших файлов уценки есть свойство image во frontmatter, которое содержит относительный путь к изображению.

Кроме того, в <Article/> похоже, что вы пытаетесь получить доступ к не-существующее свойство: props.frontmatter.title.

Вы только передаете key, title, excerpt & image реквизиты <Article/>, и, таким образом, реквизит frontmatter просто не существует. 

// article.js

import { React } from 'react'
import Img from 'gatsby-image'

const Article = (props) => {
 return(
  <div>
    <h3>{props.title}</h3>
    <Img fluid={props.image} />
  </div>
 )
}
...