REACT SWIPER DOESN'T SHOW IMAGES

Question

HEllo Why doesn't it show images? I use react swiper with a cube effect ( switching off the cube effect doesn't fix anything here my code thank you

yes I'm really new to react and other stuff... I could barely find how to even get the react swiper work with react...

the first 3 slides are just blank and the 4th and 5th says 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;

5eb · Accepted Answer · 2021-03-08T10:58:55.650

The main problem is the way you provide the src prop of your images:

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

You're actually passing an object to src here since images array looks like this:

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") }
];

Instead you need to pass the image something like this:

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

Also it shouldn't be class or classname, but className instead in React. And it's not the image tag, but img.

Full adjusted version of your example:

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

I also want to point out that there is a React specific implementation for swiperjs you could use, see the documentation here.

WOW MAN THANKS A LOT!!! BUT you know what?:))) for some reason it doesn't work...haha let me show you in another answer — Eugene1111, Mar 09 '21 at 05:43
"how do I properly do this If of course I want to have an option to edit slides to add replace slides images links etc from the admin panel in the future inside the app itself". I think this is out of the scope of this question. This probably fits better as a separate question with more detail added about the admin panel (For example do you mean with 'admin panel' a custom backend admin panel, react admin, etc...?). For importing the images you could also use [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports). — 5eb, Mar 09 '21 at 06:22
Here is a [functional component implementation](https://codesandbox.io/s/elegant-tereshkova-qkbjh). React will keep supporting class-based components and there is nothing wrong with using them though. [See this for a more complete writeup on that](https://stackoverflow.com/a/36137801/9098350). As far as the images not showing on your end goes, do you have them in the src directory or in the public directory? — 5eb, Mar 09 '21 at 06:28

score 0 · Answer 2 · answered Mar 09 '21 at 06:52

0

so I googled it and googld it and fount the fix ( I hope it is)

to add this to a webpack.config.js

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

answered Mar 09 '21 at 06:52

Eugene1111

27
2
7

is it ok to do? or it will mess up everything in the future? – Eugene1111 Mar 09 '21 at 06:52

REACT SWIPER DOESN'T SHOW IMAGES

2 Answers2