Images in React-bootstrap Carousel Not Showing

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.

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 (
    <section class="about section">
      <Carousel>
        <Carousel.Item>
          <img
            class="d-block w-100"
            src={require("../../assets/keukenhofplattegrond.png")}
            alt="First slide"
          ></img>
        </Carousel.Item>
        <Carousel.Item>
          <img
            class="d-block w-100"
            src="https://lorempixel.com/800/400/food/1"
            alt="First slide"
          ></img>
        </Carousel.Item>
      </Carousel>
    </section>
  );
}

export default About;

dev tools inspect

Carousel image