Изображения в React- bootstrap Карусель не отображаются

Question

У меня проблема с отображением изображений в карусели React- bootstrap. Карусель сама работает. Я вижу стрелки и указатель внизу. Но изображения просто не будут отображаться. Когда я проверяю элемент и наведите курсор на компонент изображения, он работает нормально. Изображение было связано, карусель работает, но изображения не показываются. Кто-нибудь знает решение этой проблемы? Вот как выглядит мой тестовый код. Я просто поместил его в раздел обо мне для справки. Смотрите изображение рабочей карусели и рабочее изображение в инструментах разработчика.

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;

Инструменты разработчика проверяют

Изображение карусели

Answer 1

Пожалуйста, попробуйте добавить ширину и высоту к изображению.

Answer 2

Попробуйте импортировать img, а затем передать его тегу img.

import {yourImage} из "route", а затем поместить его в sr c.

возможно, что работы.

Answer 3

Вам нужно изменить class на className. Ключевое слово class зарезервировано в Javascript, поэтому React использует вместо него className.

Дополнительная информация: https://reactjs.org/docs/introducing-jsx.html#specifying -attributes-with-jsx