ReactJS开发Slider轮播组件仅显示箭头不展示图片问题排查

问题原因及修复方案 #

1. dataSlider配置文件结构错误 #

你在定义imgPath的时候额外套了一层对象，导致读取到的imgPath是{hic: 图片路径}这类对象，不是直接的图片路径，img标签的src属性传入对象无法正常解析加载图片。
修改方案：将dataSlider数组里的imgPath赋值去掉外层大括号：

const dataSlider = [
    {
        imgPath: hic,
    },
    {
        imgPath: fic,
    },
    {
        imgPath: vic, 
    },
    {
        imgPath: ric,
    },
    {
        imgPath: oic,
    },
];

2. 数组遍历的索引取值错误 #

你在遍历dataSlider的时候，把map方法的第二个参数（数组索引）错误写到了数组项的解构里，数组每一项本身没有index属性，所以你拿到的index永远是undefined，后续的激活类判断、key属性赋值都会失效。
修改方案：调整map方法的参数写法，把index放到解构的外面：

{dataSlider.map(({imgPath}, index) => {
    return (
        <div
            key={index} 
            className={slideIndex === index + 1 ? "slide active-anim" : "slide"}>
            <img
                src={imgPath}
                alt=""
            />
        </div>
    )
})}

3. CSS切换逻辑错误 #

你给非激活的slide设置了opacity:1，激活态也为1，所有幻灯片会叠在一起，看不到切换效果，甚至可能因为层级问题导致显示异常。
修改方案：调整.slide的默认透明度为0，只有激活态透明度为1：

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0; /* 修改默认透明度 */
  transition: opacity ease-in-out 0.4s;
}
.active-anim {
  opacity: 1;
}

可选优化 #

你给.slide img设置的宽高是600*600，容器高度只有500px，会导致图片底部被裁切，可以调整图片宽高为100%适配容器：

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

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