How to use react-bootsrap carousel with gatsby-image?

Keywords: reactjs image react-bootstrap gatsby

Question: 

I'm trying to build a react-bootstrap carousel using gatsby-image, because the loading speed with standard img tag is slow. However, the issue I am facing is that it just won't work as I tried to use at least 3 different approaches I found online (I'm new React and web development, can't code much myself yet) See carousel.js (reduced to 2 slides for readability) code below.

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 carousel1 from 'static/carouselImages/carousel_1.jpg'
import carousel2 from 'static/carouselImages/carousel_2.jpeg'

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>
          <img
            className="d-block w-100"
            src={carousel1}
            alt="First slide"
          />
          <Carousel.Caption>
            <p> <FormattedMessage id="caption_start_today" /></p>
            <h3>
            <FormattedMessage id="caption_apply_university" />
            </h3>
            <Button variant="warning warningCustom"><Link to="/services">
            <FormattedMessage id="button_learn_more" /></Link></Button>
          </Carousel.Caption>
        </Carousel.Item>

        <Carousel.Item>
          <img
            className="d-block w-100"
            src={carousel2}
            alt="Second slide"
          />
          <Carousel.Caption>
            <p><FormattedMessage id="caption_we_understand" /></p>
            <h3>
            <FormattedMessage id="caption_students" />
            </h3>
            <Button variant="warning warningCustom"><Link to="/about">
            <FormattedMessage id="button_about_us" /></Link></Button>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    )
  }
}
export default ControlledCarousel

Any suggestions on the proper way to make it work together? Help is very much appreciated.

Answers: