I want to make a slider with several pics. so I'm using react. first I create Main component, where I put as a child Slider component. in Slider component where I created an array with an object, object has a path to the picture. then I create SliderContent component and import it in Slider component. then I created Slide component and import it in SliderContent component. here it is how looks Main component code:

import Slider from "../Components/Slider";



export default function Main(){

    return(
        <>
            <div className="main">
                <Slider />
            </div>
        </>
    )
}

here is how looks component Slider code:

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>
        </>
    )
}

here is how looks component SliderContent code:

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>
        </>
    )
}

and here is how looks Slide component code:

import './Slider.css'

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

but here is what it shows: it shows an alt atribute of img tag in Slide component and picture doesn't open