React-bootstrap Carousel 中的图像未显示答案

【问题标题】：Images in React-bootstrap Carousel Not ShowingReact-bootstrap Carousel 中的图像未显示
【发布时间】：2020-07-20 07:10:33
【问题描述】：

我在 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;

dev tools inspect

Carousel image

【问题讨论】：

标签： javascript css reactjs carousel react-bootstrap

【解决方案1】：

尝试导入img，然后传递给img标签。

从 "route" 导入 {yourImage} 然后放到 src 上。

也许可行。

【讨论】：

很遗憾，似乎也没有修复它。
谢谢伙计，这对我有用。此外，我还必须将 images 文件夹移动到包含 Carousel 的 js 文件所在的同一文件夹中。

【解决方案2】：

请尝试为图片添加宽度和高度。

【讨论】：

【解决方案3】：

您需要将class 更改为className。 class 关键字在 Javascript 中是保留的，这就是 React 使用 className 的原因。

【讨论】：

我改了，可惜什么都没发生
能否检查图片来源是否加载正确？
是的，我做到了，我什至将它作为一个对象导入并用作独立的 img（在轮播之外），它完美地显示出来。