REACT SWIPER 不显示图像

Question

你好为什么不显示图像？ 我使用带有立方体效果的 react swiper（关闭立方体效果并不能解决任何问题 这是我的代码 谢谢

是的，我对 react 和其他东西真的很陌生...我几乎找不到如何让 react swiper 与 react 一起工作...

前 3 张幻灯片是空白的，第 4 和第 5 张显示的是 slide4 slide5

import React from "react";
import SwiperCore, { Autoplay } from "swiper/core";
import Swiper, { EffectCube } from "swiper";

SwiperCore.use([EffectCube, Autoplay]);

const images = [{ image: require("./img/1.jpg") }, { image: require("./img/2.jpg") }, { image: require("./img/3.jpg") }];

class Swipe extends React.Component {
    componentDidMount() {
        this.swiper = new Swiper(".swiper-container", {
            effect: "cube",
            cubeEffect: {
                shadow: true,
                slideShadows: true,
                shadowOffset: 20,
                shadowScale: 0.94,
            },
            pagination: {
                el: ".swiper-pagination",
            },
            navigation: {
                nextEl: "swiper-button-next",
                prevEl: "swiper-button-prev",
            },
            loop: true,
            grabCursor: true,
            autoplay: {
                delay: 7000,
                disableOnInteraction: true,
            },
        });
    }
    render() {
        return (
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <image classname="swiper-image" src={images[0]} />
                    </div>
                    <div class="swiper-slide">
                        <image classname="swiper-image" src={images[1]} />
                    </div>
                    <div class="swiper-slide">
                        <image classname="swiper-image" src={images[2]} />
                    </div>
                    <div class="swiper-slide">SLIDE4</div>
                    <div class="swiper-slide">SLIDE5</div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        );
    }
}

export default Swipe;

Answer 1

主要问题是您提供图片的src 属性的方式：

<image classname="swiper-image" src={images[0]}

您实际上在这里将一个对象传递给src，因为images 数组看起来像这样：

const images = [
  { image: require("./img/1.jpg") }, // Each of these objects are passed to the `src` prop of every image
  { image: require("./img/2.jpg") },
  { image: require("./img/3.jpg") }
];

相反，您需要像这样传递图像：

<img className="swiper-image" src={images[0].image} />

在 React 中也不应该是 class 或 classname，而是 className。而且不是image标签，而是img。

您的示例的完整调整版本：

import React from "react";
import SwiperCore, { Autoplay } from "swiper/core";
import Swiper, { EffectCube } from "swiper";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/effect-cube/effect-cube.scss";

SwiperCore.use([EffectCube, Autoplay]);

const images = [
  { image: require("./img/1.jpg") },
  { image: require("./img/2.jpg") },
  { image: require("./img/3.jpg") },
];

class Swipe extends React.Component {
  componentDidMount() {
    this.swiper = new Swiper(".swiper-container", {
      effect: "cube",
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
      pagination: {
        el: ".swiper-pagination",
      },
      navigation: {
        nextEl: "swiper-button-next",
        prevEl: "swiper-button-prev",
      },
      loop: true,
      grabCursor: true,
      autoplay: {
        delay: 7000,
        disableOnInteraction: true,
      },
    });
  }
  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">
            <img className="swiper-image" src={images[0].image} />
          </div>
          <div className="swiper-slide">
            <img className="swiper-image" src={images[1].image} />
          </div>
          <div className="swiper-slide">
            <img className="swiper-image" src={images[2].image} />
          </div>
          <div className="swiper-slide">SLIDE4</div>
          <div className="swiper-slide">SLIDE5</div>
        </div>
        <div className="swiper-pagination"></div>
      </div>
    );
  }
}

export default Swipe;

sandbox example

我还想指出，您可以使用 swiperjs 的 React 特定实现，请参阅文档 here。

Answer 2

所以我用谷歌搜索了它并谷歌了它并找到了修复（我希望它是）

将其添加到 webpack.config.js

 {
              test: /\.(jpeg|jpg|png)$/,
              use: {
                loader: 'file-loader',
                options: {
                  esModule: false
                }
              
              }
            },