使用gatsby-background-image在Gatsby中基于道具选择图像

Question

这不是我遇到的东西，所以我不确定该如何正确表达。

我想要做的是在这里更新值：

fluid={lookingtoupdatethisvalue.childImageSharp.fluid}

基于服务组件中道具的值。选择是婚礼图，公共图，公司图

当我使用图像处理时，我能想到的最佳方法是创建多个查询，然后根据prop值选择要使用的查询。我什至不确定这是否可行，但是正如我所说，我不了解当前的能力。感谢您的帮助

import React from "react"
import styled from "styled-components"
import { Container, Row, Col, Button } from "react-bootstrap"
import { useStaticQuery, graphql } from "gatsby"
import BackgroundImage from "gatsby-background-image"
import Title from "../components/Title"

const Service = ({ service, serviceImg, description, link, title, subTitle }) => {
  const {weddingImg, corporateImg, publicImg} = useStaticQuery(graphql`
    query {
        weddingImg: file(relativePath: { eq: "wedding-fireworks.jpg" }) {
            childImageSharp {
                fluid(quality: 90, maxWidth: 1920) {
                    ...GatsbyImageSharpFluid_withWebp
                }
            }
        }
        corporateImg: file(relativePath: { eq: "corporate-fireworks.jpg" }) {
            childImageSharp {
                fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
                }
            }
        }
        publicImg: file(relativePath: { eq: "public-fireworks.jpg" }) {
            childImageSharp {
                fluid(quality: 90, maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
                }
            }
        }
    }
  `)

  console.log(serviceImg);

  return (
    <BackgroundImage
      Tag="section"
      className="service py-5 text-white"
      fluid={serviceImg.childImageSharp.fluid}
      backgroundColor={`#040e18`}
    >
      <Container>
        <Row>
          <Col xs={12} md={6}>
            <h3>Services</h3>
            <Title title={title} subtitle={subTitle} />
            <p>{description}</p>
            <Button variant="outline-light" className="mx-1">
              <a href={link}>Find Out More</a>
            </Button>
          </Col>
        </Row>
      </Container>
    </BackgroundImage>
  )
}

const ServiceWrapper = styled.div``

export default Service

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>