React开发图片滑块时图片导入后无法显示，求技术解决方案

核心问题1：图片路径与背景图格式错误 #

你在定义slides数组时，错误地将url的值包装成了对象（比如{service1}），这会导致slides[currentIndex].url是一个包含图片路径的对象，而非直接的路径字符串。同时backgroundImage的赋值也缺少url()的格式要求。

修正代码如下：

import service1 from '../assets/service1.jpg'
import service2 from '../assets/service2.jpg'
import service3 from '../assets/service3.jpg'

// 直接将导入的图片路径赋值给url，不要包裹成对象
const slides = [
    {url: service1},
    {url: service2},
    {url: service3},
];

// 背景图样式需要用`url()`包裹路径
<div className='w-full h-full rounded-2xl bg-center bg-cover duration-500' 
     style={{backgroundImage: `url(${slides[currentIndex].url})`}}>
</div>

核心问题2：上一张幻灯片切换逻辑错误 #

你的prevSlide函数中，非第一张幻灯片时的索引计算有误，导致点击上一张按钮无法切换图片：

const prevSlide= () => {
    const isFirstSlide = currentIndex === 0
    // 非第一张时，索引应该减1，而非保持原索引
    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1
    setCurrentIndex(newIndex)
}

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