title: How to use react-bootstrap carousel with gatsby-image?
body: <p>I'm trying to build a react-bootstrap carousel using gatsby-image because the loading speed with the standard img tag is slow. However, the issue I am facing is that I would like to write a single component for all images in a folder, not for each file like in gatsby-starter-default.
  So I'd like the Image component to return an array of images that I could use in a Carousel like <code>&lt;Image[0] /&gt;</code>. Or to pass relativePath to the component inside Carousel like <code>&lt;Image(carouselImages/carousel_1.jpeg) /&gt;</code></p>
  <p>See carousel.js (reduced to 2 slides for readability) code below.</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import Carousel from 'react-bootstrap/Carousel'
  import Button from 'react-bootstrap/Button'
  import './style.scss'
  import { injectIntl, Link, FormattedMessage } from &quot;gatsby-plugin-intl&quot;
  
  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 (
        &lt;Carousel
          activeIndex={index}
          direction={direction}
          onSelect={this.handleSelect}&gt;
  
          &lt;Carousel.Item&gt;
            &lt;div className=&quot;imgWrapper&quot;&gt;
             &lt;Image1 /&gt;
            &lt;/div&gt;
            &lt;Carousel.Caption&gt;
              &lt;p&gt; some text &lt;/p&gt;
            &lt;/Carousel.Caption&gt;
          &lt;/Carousel.Item&gt;
  
          &lt;Carousel.Item&gt;
            &lt;div className=&quot;imgWrapper&quot;&gt;
             &lt;Image2 /&gt;
            &lt;/div&gt;
            &lt;Carousel.Caption&gt;
              &lt;p&gt; some text &lt;/p&gt;
            &lt;/Carousel.Caption&gt;
          &lt;/Carousel.Item&gt;
        &lt;/Carousel&gt;
      )
    }
  }
  export default ControlledCarousel
  </code></pre>
  <p>And an Image component itself:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;
  import { StaticQuery, graphql } from &quot;gatsby&quot;
  import Img from &quot;gatsby-image&quot;
  
  const Image = () =&gt; (
    &lt;StaticQuery
      query={graphql`
        query {
          placeholderImage: file(relativePath: { eq: &quot;carouselImages/carousel_1.jpg&quot; }) {
            childImageSharp {
              fluid(maxWidth: 2500) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      `}
      render={data =&gt; &lt;Img fluid={data.placeholderImage.childImageSharp.fluid} /&gt;}
    /&gt;
  )
  export default Image
  </code></pre>
  <p>Any suggestions on the proper way to make it work together? Help is very much appreciated.</p>