Do not show slider photos react With react-slick

Question

I have the next .js project. I want to use react-slick. I installed the react-slick and slick-carousel packages . I added css carousel :

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import image1 from '../../../assets/images/125.jpg'
import image2 from '../../../assets/images/Mina.jpg'
import image3 from '../../../assets/images/ffff.png'
const SliderPlugin=()=>{
        return (
            <>
            <h2> Single Item</h2>
            <Slider >
            <div >
                <img  src={image1} alt="image1"/>
              </div>
              <div>
              <img  src={image2} alt="image2"/>
              </div>
              <div>
              <img  src={image3} alt="image2"/>
              </div>
            </Slider>
          </>
        )
      }
export default SliderPlugin;

But no photo is displayed. Only in dev Tools, there are div and img.

score 0 · Accepted Answer · answered Oct 03 '21 at 11:21

Verify Image Path

Firstly, in order to verify Image path. Here I'll use the Network images for testeing its working fine.

import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default class SimpleSlider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        "https://source.unsplash.com/1024x768/?nature",
        "https://source.unsplash.com/1024x768/?water",
        "https://source.unsplash.com/1024x768/?girl",
        "https://source.unsplash.com/1024x768/?tree", // Network image
        // require('./assets/images/abc.jpg'),          // Local image
      ]
    };
  }
  // other component code ...

  render() {
    const settings = {
      dots: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div className="slider-wrapper">
        <Slider {...settings}>
          {this.state.images?.map((imageName, index) => <div key={`${index}`}>
            <img src={imageName} alt={`${index}`} />
          </div>)}
        </Slider>
      </div>
    );
  }
}

Do not show slider photos react With react-slick

1 Answers1