如何在Gatsby中为可重用组件返回特定图像？

问题描述

因此，我在React中创建了一个可重用的英雄部分，并从数据文件中检索了图像，因此更新新图像所需要做的就是更新数据文件。我正在尝试将此组件转换为Gatsby，但不确定如何用我的数据文件实现其图片插件。

我的图片组件以该代码rn返回我的所有图片

        const Image = () => {
          const data = useStaticQuery(graphql`
            query {
              allImageSharp {
                edges {
                  node {
                    id
                    fluid(maxWidth: 200,maxHeight: 200) {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          `)

          return (
            <>
              {data.allImageSharp.edges.map(edge => (
                <Img fluid={edge.node.fluid} />
              ))}
            </>
          )
        }

下面是我要转换为使用盖茨比的React代码

我的数据文件只是一个链接我要使用的图像的对象

 export const heroSectionOne = {
  img: require('../../images/profile.jpg'),alt: 'Image',start: 'true'
 };

 export const heroSectionTwo = {
  img: require('../../images/house.jpg'),start: 'true'
 };

现在，我只传递组件上的道具

       <ImgWrapper start={start}>
            <Img src={img} alt={alt} />
          </ImgWrapper>

然后在我的主页组件中，我将重用该组件，但是切换使用哪个数据文件，以便获得不同的图像

  <InfoSection {...heroSectionOne} />
  <InfoSection {...heroSectionTwo} />

现在，我的组件将显示img '../../images/profile.jpg'，而第二部分将显示house.jpg图片，因为我将其硬编码到了数据文件中，但是对于Gatsby，我将如何复制该方法带有图像成分？

我该如何在gatsby中编写图像组件，以便能够在应用程序中的任何位置传递该图像组件，然后添加要在该组件中使用的图像，最后将其添加到其中？

我只看过一些教程，该教程显示了如何向查询中添加特定图像或如何一次显示文件夹中的所有图像，但是对于通过数据文件传递图像一无所见

解决方法

要像Gatsby的Image这样工作，是很棘手的。但是，我必须说，您可以根据所使用的文件系统以及数据的结构以不同的方式绕过它。

请记住，如果您在gatsby-config.js中正确设置了文件系统，则将允许Gatsby识别并找到项目中的所有图像，使其可查询，并允许Gatsby Image组件使用它们。

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,options: {
        name: `images`,path: path.join(__dirname,`src`,`images`),},`gatsby-plugin-sharp`,`gatsby-transformer-sharp`,],}

与查询按路径过滤的staticQuery中的每个图像相比，您可以找到更好的方法，这不是唯一的实现方法。当然，如果您使用的是staticQuery方法，则使其动态变化的局限性迫使您分别进行每个查询。

首先，您需要了解staticQuery and page query之间的区别，以了解适合您的地方以及它们的局限性。

如果使用页面查询，则始终可以创建类似于以下方法：

import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'

class ProductPage extends React.Component {
  render() {

    const products = get(this,'props.data.allDataJson.edges')

    return (
      <Layout>
        {products.map(({ node }) => {
          return (
            <div key={node.name}>
              <p>{node.name}</p>
              <Img fluid={node.image.childImageSharp.fluid} />
            </div>
          )
        })}
      </Layout>
    )
  }
}

export default ProductPage


export const productsQuery = graphql`
  query {
    allDataJson {
      edges {
        node {
          slug
          name
          image{
            publicURL
            childImageSharp{
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`

在上面的示例中，您正在使用页面查询来从JSON文件检索所有图像。如果在文件系统中设置路径，则可以使用GraphQL片段检索它们。在处理Gatsby Image时，这种方法更具动态性，最好一一查询。

对于其他文件系统，此想法仍然相同，这只是一种可适应的方法。如果您使用诸如Contentful之类的CMS，则可以下载资产并以相同的方式动态查询资产，因为文件系统允许您这样做。

页面查询仅在页面组件中被允许（因此命名），因此，如果您想在React独立组件中使用它以使其可重用，则需要通过props（或reducer）传递给所需的组件，并且根据收到的道具渲染盖茨比图像。