不显示滑块照片与 react-slick 反应

Question

我有下一个 .js 项目。我想使用反应光滑。我安装了 react-slick 和 slick-carousel 包。我添加了 css 轮播：

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;

但是没有照片显示。只有在dev Tools里面有div和img.

Answer 1

验证图像路径

首先，为了验证Image路径。在这里我将使用网络图像来测试其工作正常。

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

不显示滑块照片与 react-slick 反应

Do not show slider photos react With react-slick

reactjs

react-slick

next.js