Как использовать ответную бутсрапскую карусель с изображением Гэтсби?

Question

Я пытаюсь построить карусель реакции-начальной загрузки, используя gatsby-image, потому что скорость загрузки со стандартным тегом img низкая. Однако проблема, с которой я сталкиваюсь, заключается в том, что я хотел бы написать один компонент для всех изображений в папке, а не для каждого файла, как в gatsby-starter-default. Поэтому я бы хотел, чтобы компонент Image возвращал массив изображений, которые я мог бы использовать в карусели, например <Image[0] />. Или передать относительный путь к компоненту внутри карусели, например <Image(carouselImages/carousel_1.jpeg) />

См. Код carousel.js (уменьшен до 2 слайдов для удобства чтения) ниже.

import React from 'react'
import Carousel from 'react-bootstrap/Carousel'
import Button from 'react-bootstrap/Button'
import './style.scss'
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

import Image1 from 'components/img1'
import Image2 from 'components/img2'

class ControlledCarousel extends React.Component {
  constructor(props, context) {
    super(props, context)

    this.handleSelect = this.handleSelect.bind(this)

    this.state = {
      index: 0,
      direction: null,
    }
  }

  handleSelect(selectedIndex, e) {
    this.setState({
      index: selectedIndex,
      direction: e.direction,
    })
  }

  render() {
    const { index, direction } = this.state

    return (
      <Carousel
        activeIndex={index}
        direction={direction}
        onSelect={this.handleSelect}>

        <Carousel.Item>
          <div className="imgWrapper">
           <Image1 />
          </div>
          <Carousel.Caption>
            <p> some text </p>
          </Carousel.Caption>
        </Carousel.Item>

        <Carousel.Item>
          <div className="imgWrapper">
           <Image2 />
          </div>
          <Carousel.Caption>
            <p> some text </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    )
  }
}
export default ControlledCarousel

И сам компонент Image:

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

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "carouselImages/carousel_1.jpg" }) {
          childImageSharp {
            fluid(maxWidth: 2500) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
export default Image

Есть какие-нибудь предложения о том, как заставить его работать вместе? Помощь очень ценится.