将盖茨比图像作为道具传递答案

【问题标题】：Passing Gatsby Image As Prop将盖茨比图像作为道具传递
【发布时间】：2020-02-20 09:14:02
【问题描述】：

我正在尝试通过构建一个演示博客来学习 Gatsby。我有一个存档组件，我在其中查询博客数据，并且我试图将图像作为道具向下传递，但是，当我尝试访问我的文章组件中的道具时，我不断收到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

Markdown 标头如下：

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

记录的数据：

文章组件：

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

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

 )
}

【问题讨论】：

代码没问题，请详细说明图片位置，并做一个可生产的例子How to create a Minimal, Reproducible Example
图像位于“/src/images”文件夹中。我在 Markdown 文件中定义了图像路径
所以给我们看，给我们看markdown，请阅读我分享的链接
另外，向我们展示您记录的数据值
请显示您记录的数据，您是否在 GraphiQL 中检查过您的查询？

标签： reactjs graphql gatsby gatsby-image

【解决方案1】：

确保您的每个降价文件在 frontmatter 中都有一个 image 属性，其中包含图像的相对路径。

另外，在<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>
 )
}

【讨论】：

标题也是frontmatter的一部分，如果它们都在frontmatter中，我如何访问标题而不是图像？
对不起@ksav，我有点困惑，你能详细说明一下吗？提前致谢！

【解决方案2】：

也许它对某人有用：

安装npm install --save gatsby-source-filesystem
添加到您的 gatsby-config.js：

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `static`,
        path: `${__dirname}/static/blog/`,
      },
    },

在 src 旁边创建一个文件夹static
在markdown文件中更改图片的路径
比：

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

// components
import Article from "./article"

const BLOG_QUERY = graphql`
  {
    allMarkdownRemark {
      nodes {
        excerpt
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          author
          slug
          image {
            childImageSharp {
               gatsbyImageData(
                 formats: [AUTO, WEBP, AVIF]
               )
            }
          }
        }
        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}
        />
      ))}
    </div>
  )
}

export default Archive

import { React } from 'react'
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const Article = (props) => {

const image = getImage(props.image)

 return(
  <div>
    <h3>{props.title}</h3>
    <GatsbyImage image={image} alt={props.title} />
  </div>

 )
}

如果不起作用：gatsby clean

【讨论】：