时间戳

首页 > 解决方案 > React-bootstrap Carousel 中的图像未显示

javascript - React-bootstrap Carousel 中的图像未显示

问题描述

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

开发工具检查

轮播图片

标签： javascriptcssreactjscarouselreact-bootstrap

解决方案

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

import {yourImage} from "route" 然后放到 src 上。

也许那行得通。

推荐阅读