从 state 和 GraphQL 传递 Gatsby Image 道具

Question

我遇到了来自“gatsby-plugin-image”插件的 GatsbyImage 问题，我真的可以使用一些帮助。

我有一个这样创建的可重用组件：

<section className={this.props.className}> 
  <div className="flexCol summaryStyles">
    <h3 className="boldStyles">{this.props.title}</h3>
    {this.props.copy}
  </div>
  <div className="imagecontainerStyles">
    {this.props.image}
  </div>
</section>

我想使用这个可重复使用的组件来显示不同的图像（在我的 src/images 文件夹结构中，我有一个名为“process”的子文件夹，我将在其中放置多个图像）。在 {this.props.image} 中，我想像这样传入一个 GatsbyImage 组件：

{this.state.map((item, index) =>
  <Process 
    key={index}
    className={item.className}
    title={item.title}
    copy={item.copy}
    image={<GatsbyImage image={item.image} alt={item.alt}></GatsbyImage>}
  >
  </Process>
)}

我的状态设置是这样的（我现在只有一个项目，但以后会有多个项目）：

constructor(props) {
    super(props);
    this.state = [
        {
            className: "flexRow flexRowL",
            title: "EXPLORE",
            copy: <p className="pStyles">I did <strong>user interviews</strong> with people that have food allergies to find out what their experiences have been when eating out, specifically ordering food to go.</p>,
            image: this.props.data.pics.edges[0],
            alt: "Explore UI image"
        }
    ];
}

我的 GraphQL 设置如下：

export const pageQuery = graphql `
    query {
        pics: allFile(filter: {relativeDirectory: {eq: "process"}}) {
            edges {
                node {
                    name
                    childImageSharp {
                        id
                    }
                }
            }
        }
    }
`

我得到的唯一结果是： Website Screenshot Preview

我不确定我做错了什么，如果有人可以提供帮助或解释，我将不胜感激。我已经阅读了 Gatsby 上的文档和 StackOverflow 上的帖子，但我似乎无法弄清楚。这是我第一次使用 GraphQL。

Answer 1

我认为您的方法足够有效，但我认为您缺少 GraphQL 查询中的关键数据以允许 Gatsby 打印您的图像。它应该是这样的：

export const pageQuery = graphql `
    query {
        pics: allFile(filter: {relativeDirectory: {eq: "process"}}) {
            edges {
                node {
                    name
                    childImageSharp {
                       gatsbyImageData(
                         width: 200
                         placeholder: BLURRED
                         formats: [AUTO, WEBP, AVIF]
                       )
                    }
                }
            }
        }
    }
`

注意：当然，调整和自定义占位符（如果需要，也可以删除）

您需要从图像中获取gatsbyImageData 才能将其用作GatsbyImage 组件中的image 属性。

之后，您的数据应始终为gatsbyImageData，因此：

image: this.props.data.pics.edges[0],

应该变成：

image: this.props.data.pics.edges.node[0].childImageSharp.gatsbyImageData,

数组是node，而不是edges，因此（目前）取第一个元素应该在node[0]中。在那里，正如我所说，所需的数据是 gatsbyImageData，所以你需要继续嵌套直到你到达它。