title: Images in React-bootstrap Carousel Not Showing
body: <p>I'm having a problem showing images in the React-bootstrap carousel. The carousel itself works. I see the arrows and index at the bottom. But the images just won't show. When I inspect element and hover over the image component, it works fine. The image has been linked fine, the carousel is working, but the images wont show. Anyone knows a fix on this problem?
  This is what my test code looks like. I just put it in the about me section for reference. See image for working carousel and working image in dev tools. </p>
  
  <pre><code>import React from "react";
  import "./section.css";
  import "../../App.css";
  import { useTranslation } from "react-i18next";
  import { Carousel } from "react-bootstrap";
  
  function About() {
    const { t } = useTranslation();
    return (
      &lt;section class="about section"&gt;
        &lt;Carousel&gt;
          &lt;Carousel.Item&gt;
            &lt;img
              class="d-block w-100"
              src={require("../../assets/keukenhofplattegrond.png")}
              alt="First slide"
            &gt;&lt;/img&gt;
          &lt;/Carousel.Item&gt;
          &lt;Carousel.Item&gt;
            &lt;img
              class="d-block w-100"
              src="https://lorempixel.com/800/400/food/1"
              alt="First slide"
            &gt;&lt;/img&gt;
          &lt;/Carousel.Item&gt;
        &lt;/Carousel&gt;
      &lt;/section&gt;
    );
  }
  
  export default About;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/SGL86.png" rel="nofollow noreferrer">dev tools inspect</a></p>
  
  <p><a href="https://i.stack.imgur.com/6Y4ZF.png" rel="nofollow noreferrer">Carousel image</a></p>