React引导程序旋转木马中的图像未显示

Question

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

开发工具检查

旋转木马图像

Answer 1

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

更多信息：https://reactjs.org/docs/introducing-jsx.html#specifying-带有jsx 的属性

Answer 2

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

Answer 3

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

从"route"导入｛yourImage｝，然后将其放在src上。

也许这行得通。