1

我在 Gatsby 网站上工作，我不断收到“TypeError：无法读取未定义的属性 'childImageFluid'”

我的代码在我的 Project.js 文件中

import React from "react"
import PropTypes from "prop-types"
import Image from "gatsby-image"
import { FaGithubSquare, FaShareSquare } from "react-icons/fa"
const Project = ({description, title, github, stack, url, image, index}) => {
  return (
    <article className="project">
      <Image fluid={image.childImageFluid.fluid} className="project-img" />
    </article>
  ) 
}

Project.propTypes = {}

export default Project

我在 index.js 文件中设置了 graphql，它将在其中显示，并且一切都在 graphql 中正常工作......

export const query = graphql`
         {
           allStrapiProjects(filter: { featured: { eq: true } }) {
             nodes {
               github
               id
               description
               title
               url
               image {
                 childImageSharp {
                   fluid {
                     ...GatsbyImageSharpFluid
                   }
                 }
               }
               stack {
                 id
                 title
               }
             }
           }
         }
       `

我在 Project.js 文件中所做的一切都在我的 github 中 - https://github.com/matthewbert86/gatsby-site但所有这些代码都在上面的第一个代码部分中。

4

1 回答 1

0

当您在 GraphQL 中使用页面查询时，您收集的数据存储在一个data对象中（作为 a props）。您需要遍历它，直到获得流畅的图像。它应该在：props.data.allStrapiProjects.nodes.image.childImageFluid.fluid。由于您正在解构<Project>组件中的所有内容：

const Project = ({ data }) => {
let { description, title, github, stack, url, image } = data.allStrapiProjects.nodes; // your data is here

return (
    <article className="project">
      <Img fluid={data.allStrapiProjects.nodes.image.childImageFluid.fluid} className="project-img" />
    </article>
  ) 
}

解构后，您可以将其重构为：

  <Img fluid={image.childImageFluid.fluid} className="project-img" />

还有一点，我想gatsby-image导入应该是Img，而不是Image。

于 2020-07-08T16:16:59.890 回答