React中如何用数组内图片实现滑块？路径引入问题求助

你的问题核心是Webpack的静态资源解析机制导致动态拼接路径无法被正确识别，同时代码里还存在路径拼写错误，下面给你两种可行的解决方案：

方案一：提前在数组中静态引入所有图片 #

直接在slides数组里用require引入每张图片，让Webpack在编译时就能识别所有需要打包的图片资源，这也是最稳妥的方式：

import { useState } from "react";
import "./styles.css";

function Slider () {
  // 直接在数组中完成图片引入
  const slides = [
    {url: require("./../../img/sliders/slider1.jpg").default, title: "slider1"},
    {url: require("./../../img/sliders/slider2.jpg").default, title: "slider2"},
    {url: require("./../../img/sliders/slider3.jpg").default, title: "slider3"},
    {url: require("./../../img/sliders/slider4.jpg").default, title: "slider4"},
    {url: require("./../../img/sliders/slider5.jpg").default, title: "slider5"}
  ]

  const [currentIndex, setCurrentIndex] = useState(0);

  const goToPrevious = () => { // 修正拼写错误：goToprevious → goToPrevious
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  }

  const goToNext = () => {
    const isLastSlide = currentIndex === slides.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  }

  const goToSlide = (slideIndex) => {
    setCurrentIndex(slideIndex);
  }

  return(
    <div className="slider"> 
      <div className="rightArray" onClick={goToNext}> > </div>
      {/* 直接使用数组中已解析好的图片路径 */}
      <img src={slides[currentIndex].url} alt={slides[currentIndex].title} />
      <div className="dots">
        {
          slides.map((slide, slideIndex) => (
            <div key={slideIndex} onClick={() => goToSlide(slideIndex)}> ● </div>
          ))
        }
      </div>
      <div className="leftArray" onClick={goToPrevious}> < </div>
    </div>
  );
}

export default Slider;

方案二：使用动态导入函数（适合图片较多场景） #

如果图片数量较多，不想逐个写require，可以利用Webpack的动态导入规则——固定路径前缀，只动态传递文件名，Webpack会自动打包该目录下所有图片：

import { useState } from "react";
import "./styles.css";

function Slider () {
  const slides = [
    {url: "slider1.jpg", title: "slider1"},
    {url: "slider2.jpg", title: "slider2"},
    {url: "slider3.jpg", title: "slider3"},
    {url: "slider4.jpg", title: "slider4"},
    {url: "slider5.jpg", title: "slider5"}
  ]

  // 封装动态获取图片的函数，固定路径前缀
  const getImageUrl = (filename) => {
    // 注意路径里的斜杠：sliders/ 不能少
    return require(`./../../img/sliders/${filename}`).default;
  }

  const [currentIndex, setCurrentIndex] = useState(0);

  const goToPrevious = () => {
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  }

  const goToNext = () => {
    const isLastSlide = currentIndex === slides.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  }

  const goToSlide = (slideIndex) => {
    setCurrentIndex(slideIndex);
  }

  return(
    <div className="slider"> 
      <div className="rightArray" onClick={goToNext}> > </div>
      {/* 调用函数获取动态路径 */}
      <img src={getImageUrl(slides[currentIndex].url)} alt={slides[currentIndex].title} />
      <div className="dots">
        {
          slides.map((slide, slideIndex) => (
            <div key={slideIndex} onClick={() => goToSlide(slideIndex)}> ● </div>
          ))
        }
      </div>
      <div className="leftArray" onClick={goToPrevious}> < </div>
    </div>
  );
}

export default Slider;

额外注意点 #

1. 你原代码中require路径少了一个斜杠：./../../img/sliders${slides[currentIndex].url} → 应该是./../../img/sliders/${slides[currentIndex].url}，这也是导致报错的原因之一。
2. 函数名goToprevious拼写错误，修正为goToPrevious避免后续维护问题。

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