Entonces, después de pasar el nuestro descubriendo cómo enrutar la carpeta de imágenes a mi componente Slider.js, todavía parece que no puedo hacer que aparezcan las imágenes.

Aquí está mi código Slider.js

 import React, {useState} from 'react' import './Slider.css' import BtnSlider from './BtnSlider' import dataSlider from './dataSlider' export default function Slider() { const [slideIndex, setSlideIndex] = useState(1) const nextSlide = () => { if(slideIndex !== dataSlider.length){ setSlideIndex(slideIndex + 1) } else if (slideIndex === dataSlider.length){ setSlideIndex(1) } } const prevSlide = () => { if(slideIndex !== 1){ setSlideIndex(slideIndex - 1) } else if (slideIndex === 1){ setSlideIndex(dataSlider.length) } } const moveDot = index => { setSlideIndex(index) } return ( <div className="container-slider"> {dataSlider.map((obj, index) => { return ( <div key={obj.id} className={slideIndex === index + 1 ? "slide active-anim" : "slide"} > <img src={process.env.PUBLIC_URL + `/images${index + 1}.jpg`} /> </div> ) })} <BtnSlider moveSlide={nextSlide} direction={"next"} /> <BtnSlider moveSlide={prevSlide} direction={"prev"}/> <div className="container-dots"> {Array.from({length: 5}).map((item, index) => ( <div onClick={() => moveDot(index + 1)} className={slideIndex === index + 1 ? "dot active" : "dot"} ></div> ))} </div> </div> ) }

Muestra esto cuando hago clic y me deslizo. Solo necesita asegurarse de que el src esté funcionando ingrese la descripción de la imagen aquí