不显示滑块照片 使用 react-slick 做出反应

Posted 2023-02-25

【中文标题】不显示滑块照片 使用 react-slick 做出反应

【英文标题】：Do not show slider photos react With react-slick

【发布时间】：2021-10-03 10:57:27

【问题描述】：

我有下一个 .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 />
              </div>
              <div>
              <img  src=image2 />
              </div>
              <div>
              <img  src=image3 />
              </div>
            </Slider>
          </>
        )
      
export default SliderPlugin;

但没有显示照片。只有在开发工具中，有div和img。

【参考方案1】：

验证图片路径

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

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