React项目使用react-slick轮播组件图片无法显示问题求助

解决方案 #

• 第一步：给Slider组件添加必填配置项
  react-slick必须传入配置参数才能正常渲染轮播结构，你可以先使用基础配置测试：

const settings = {
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  speed: 500,
  dots: true
}

然后将配置绑定到Slider组件：<Slider {...settings}>

• 第二步：给图片设置宽高样式
  slick默认容器高度由内容撑开，未设置尺寸的图片会导致容器高度为0不可见，你可以给img添加行内样式或者全局样式：

.slick-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

• 第三步：验证图片路径有效性
  打开开发者工具查看img元素的src属性，直接访问该地址确认图片可以正常加载，如果路径返回404，需要调整assets资源的引入路径，不同脚手架的静态资源处理规则不同，你可以先把测试图片放到public目录下，用绝对路径/xxx.jpg引入验证。

• 第四步：确认slick样式正确加载
  检查开发者工具的样式面板，确认.slick-list、.slick-track等slick自带类有对应的CSS属性，如果没有样式说明CSS文件引入失败，可以根据你使用的脚手架调整引入路径，部分项目需要用相对路径从node_modules里完整引入。

修改后的完整代码 #

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=()=>{
  const settings = {
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 500,
    dots: true
  }
  return (
    <>
      <h2> Single Item</h2>
      <Slider {...settings}>
        <div >
          <img style={{width: '100%', height: '400px', objectFit: 'cover'}} src={image1} alt="image1"/>
        </div>
        <div>
          <img style={{width: '100%', height: '400px', objectFit: 'cover'}} src={image2} alt="image2"/>
        </div>
        <div>
          <img style={{width: '100%', height: '400px', objectFit: 'cover'}} src={image3} alt="image3"/>
        </div>
      </Slider>
    </>
  )
}
export default SliderPlugin;

内容的提问来源于stack exchange，提问作者Mina