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

Posted 2023-03-08

【中文标题】如何在 Gatsby 中为我的可重用组件返回特定图像？

【英文标题】：How Can I return a specific image in Gatsby for my reusable component?

【发布时间】：2021-01-02 19:31:44

【问题描述】：

所以我在 React 中创建了一个可重用的 hero 部分，并从数据文件中检索图像，所以我需要做的就是更新我的数据文件来更新新图像。我正在尝试将此组件转换为 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 />
              ))
            </>
          )
        

下面是我尝试转换为使用 gatsby 的 React 代码

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

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

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

现在，我只是传入组件上的 props

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

然后在我的首页组件中，我会复用该组件，但是切换使用哪个数据文件，所以我得到一个不同的图像

  <InfoSection ...heroSectionOne />
  <InfoSection ...heroSectionTwo />

所以现在，我的组件将显示 img '../../images/profile.jpg'，第二部分将显示 house.jpg 图片，因为我已将其硬编码在我的数据文件中，但是对于 Gatsby，我将如何使用他们的方法复制相同的方法图片组件？

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

我只看过一些教程，展示了如何将特定图像添加到您的查询中，或者如何一次显示文件夹中的所有图像，但没有看到任何关于通过数据文件传递它的内容

【参考方案1】：

像 Gatsby's 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）传递给您想要的组件和根据收到的 props 渲染 Gatsby 图片。

【讨论】：

仅适用于一张图片。我需要一种从我的数据对象文件中获取图像的方法，这样我就可以将图像文件名作为道具传递

这不是答案的范围，并且与您的其他人重复。