Quiero hacer un slider con varias fotos. así que estoy usando reaccionar. primero creo el componente principal, donde lo coloco como un componente deslizante secundario. en el componente Slider donde creé una matriz con un objeto, el objeto tiene una ruta a la imagen. luego creo el componente SliderContent y lo importo en el componente Slider. luego creé el componente Slide y lo importé en el componente SliderContent. aquí está cómo se ve el código del componente principal:

 import Slider from "../Components/Slider"; export default function Main(){ return( <> <div className="main"> <Slider /> </div> </> ) }

así es como se ve el código del control deslizante del componente:

 import './Slider.css' import SliderContent from "./SliderContent"; // import Slide from "./Slide"; const images = [ { id: 2, title: "imageTwo", img: "../images/pharma.jpg" } ] export default function Slider(){ return( <> <div className="slider"> <SliderContent slides ={images} /> </div> </> ) }

así es como se ve el código del componente SliderContent:

 import './Slider.css' import Slide from "./Slide"; export default function SliderContent(props){ return( <> <div className="sliderContent"> { props.slides.map(slide => <Slide key={slide.img} content={slide.img} /> ) } </div> </> ) }

y así es como se ve el código del componente Slide:

 import './Slider.css' export default function Slide(props){ return( <> <div className="slide" > <img alt="pic" src={props.content}/> </div> </> ) }

pero esto es lo que muestra: muestra un atributo alt de la etiqueta img en el componente Diapositiva y la imagen no se abre