Javascript React引导转盘中的图像未显示

我在React引导转盘中显示图像时遇到问题。旋转木马本身也能工作。我在底部看到箭头和索引。但这些图像根本无法显示。当我检查元素并将鼠标悬停在图像组件上时，它工作正常。图像链接良好，旋转木马正在工作，但图像不会显示。有人知道这个问题的解决方法吗？ 这就是我的测试代码的样子。我只是把它放在关于我的部分作为参考。请参见开发工具中的工作转盘和工作图像的图像

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;

从“React”导入React；
导入“/section.css”；
导入“../../App.css”；
从“react-i18next”导入{useTranslation}；
从“react bootstrap”导入{Carousel}；
函数About（）{
const{t}=useTranslation（）；
返回(
);
}
导出默认值约为；

---

您需要将

class

更改为

className

class

关键字在Javascript中是保留的，这就是React使用

className

的原因

---

更多信息：

您需要将

class

更改为

className

class

关键字在Javascript中是保留的，这就是React使用

className

的原因

---

更多信息：

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

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

尝试导入img，然后将其传递给img标记

从“route”导入{yourmage}，然后将其放在src上

---

也许这样行。

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

从“route”导入{yourmage}，然后将其放在src上

---

也许这样行。

我也遇到了同样的问题，我解决问题的方法是导入Carlos Zavala提到的图像：

    import image from "./image.jpg";

   <img 
     className="d-block w-100" 
     src={image} 
     alt="Third slide" 
   />

从“/image.jpg”导入图像；

我遇到了同样的问题，我解决问题的方法是导入Carlos Zavala提到的图像：

    import image from "./image.jpg";

   <img 
     className="d-block w-100" 
     src={image} 
     alt="Third slide" 
   />

从“/image.jpg”导入图像；

我更改了它，但不幸的是什么也没发生。你能检查一下图像的来源是否正确加载吗？是的，我做了，我甚至将它作为一个对象导入，并将其用作一个独立的img（旋转木马之外）它显示得非常完美。我更改了它，但不幸的是什么也没发生。你能检查图像源是否正确加载吗？是的，我做了，我甚至将其作为一个对象导入，并将其用作一个独立的img（旋转木马外部），它显示得非常完美。遗憾的是，它似乎也无法修复。遗憾的是，它似乎也无法修复。