REACT SWIPER 不顯示圖像

Question

你好為什么不顯示圖像？ 我使用帶有立方體效果的 React swiper（關閉立方體效果並不能解決任何問題，我的代碼謝謝

是的，我對反應和其他東西真的很陌生......我幾乎找不到如何讓反應滑動器與反應一起工作......

前 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]}

您實際上在這里將 object 傳遞給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} />

此外，它不應該是class或classname ，而應該是 React 中的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;

沙盒示例

我還想指出，您可以使用針對swiperjs的 React 特定實現，請參閱此處的文檔。

Answer 2

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

將此添加到 webpack.config.js

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