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.

CodePudding user response：

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