Reactjs 如何使用图像组件将图像动态添加到Gatsby中的页面？

因此，我有一个图像组件，可以呈现两个不同的图像，但我希望能够将我的图像组件添加到任何页面，并将特定的图像作为道具传入，而不必为我需要使用的每个图像硬编码一个新的查询

如果我有50张图片，我只想将image-50.jpg作为道具传入，而不是对其进行特定查询。《盖茨比》中的graphql有没有办法做到这一点

这是我当前的图像组件代码

      import { graphql, useStaticQuery } from "gatsby"
      import Img from "gatsby-image"
      import React from "react"

      const Image = () => {
        const data = useStaticQuery(graphql`
          query {
            astronaut: file(relativePath: { eq: "gatsby-astronaut.png" }) {
              childImageSharp {
                fluid(maxHeight: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            person: file(relativePath: { eq: "profile.jpg" }) {
              childImageSharp {
                fluid(maxHeight: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        `)

        return (
          <>
            <Img fluid={data.astronaut.childImageSharp.fluid} />
            <Img fluid={data.person.childImageSharp.fluid} />
          </>
        )
      }

      export default Image

从“盖茨比”导入{graphql，usesticquery}
从“盖茨比图像”导入Img
从“React”导入React
常量图像=（）=>{
常量数据=useStaticQuery（graphql`
质疑{
宇航员：文件（relativePath:{eq:“gatsby audion.png”}）{
childImageSharp{
流体（最大高度：600）{
…盖茨比磁流体
}
}
}
person:file（relativePath:{eq:profile.jpg}）{
childImageSharp{
流体（最大高度：600）{
…盖茨比磁流体
}
}
}
}
`)
返回(

---

我不知道如何将其添加到graphql中，并想象我有50个图像，然后我必须映射全部50个图像，或者手动添加每个查询，这没有任何意义

信不信由你，你无法使用

gastby image

创建一个完全动态的图像组件，而不冒风险（可能非常大）bundle大小膨胀。问题是Gatsby中的静态查询不支持其模板文本中的字符串插值。每次使用组件时，您都需要搜索所有文件。 有一些解决方案，你可以尝试在现有的SO后发现

您可以始终使用graphql片段，为您的查询编写如下内容，然后根据通过图像组件中的道具传递的文件名有条件地呈现适当的图像，但这也非常笨拙：

export const fluidImage=graphql`
文件中的碎片图像{
childImageSharp{
流体（最大宽度：1000）{
…盖茨比磁流体
}
}
}
`;
导出常量数据=图形ql`
质疑{
imageOne:文件（relativePath:{eq:'one.jpg}）{
…流体图像
}
imageTwo:file（relativePath:{eq:two.jpg}）{
…流体图像
}
imageThree:文件（relativePath:{eq:'three.jpg}）{
…流体图像
}
}
`
//像这样访问
//还是这个
//或者，动态地（如果您有一个名为imageName的道具）

信不信由你，使用

gastby图像

创建一个完全动态的图像组件时，必须冒着一个（可能非常大）的风险bundle大小膨胀。问题是Gatsby中的静态查询不支持其模板文本中的字符串插值。每次使用组件时，您都需要搜索所有文件。 有一些解决方案，你可以尝试在现有的SO后发现

您可以始终使用graphql片段，为您的查询编写如下内容，然后根据通过图像组件中的道具传递的文件名有条件地呈现适当的图像，但这也非常笨拙：

export const fluidImage=graphql`
文件中的碎片图像{
childImageSharp{
流体（最大宽度：1000）{
…盖茨比磁流体
}
}
}
`;
导出常量数据=图形ql`
质疑{
imageOne:文件（relativePath:{eq:'one.jpg}）{
…流体图像
}
imageTwo:file（relativePath:{eq:two.jpg}）{
…流体图像
}
imageThree:文件（relativePath:{eq:'three.jpg}）{
…流体图像
}
}
`
//像这样访问
//还是这个
//或者，动态地（如果您有一个名为imageName的道具）

正如所解释的，像盖茨比的图像那样工作是很棘手的。但是，我必须说，根据使用的文件系统和数据的结构，您可以通过不同的方式绕过它

请记住，如果您在

gatsby config.js

中正确设置了文件系统，您将允许gatsby识别并查找项目中的所有图像，使它们可查询，并允许gatsby图像组件使用它们

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

方法，则动态查询的限制会迫使您单独进行每个查询

首先，你需要了解两者之间的区别，以了解哪种适合你，以及它们的局限性

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

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
              }
            }
          }
        }
      }
    }
  }
`

从“React”导入React
从“盖茨比”导入{graphql}
从“../components/Layout”导入布局
类ProductPage扩展了React.Component{
render（）{
const products=get（这是'props.data.allDataJson.edges'）
返回(
{products.map（{node}）=>{
返回(
{node.name}

)
})}
)
}
}
导出默认产品页
导出常量productsqery=graphql`
质疑{
allDataJson{
边缘{
节点{
鼻涕虫
名称
形象{
公共URL
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
}
}
}
}
`

在上面的示例中，您使用页面查询从JSON文件检索所有图像。如果您在文件系统中设置路径，您将能够使用GraphQL片段检索它们。这种方法在处理Gatsby图像时更具动态性，而且效果更好