Hero-slider shows slider functions but don't shows images - reactjs

Question

I have a small app with react where I used hero-slider for the image slider. it shows the result as slider and background color. but the images are not shown.
here is my basicslider.js
import React from "react";
// JSX
import HeroSlider, { Slide, Nav } from "hero-slider";
// Images
const bogliasco = "https://i.imgur.com/Gu5Cznz.jpg";
const countyClare = "https://i.imgur.com/idjXzVQ.jpg";
const craterRock = "https://i.imgur.com/8DYumaY.jpg";
const giauPass = "https://i.imgur.com/8IuucQZ.jpg";
const BasicSlider = () => {
return (
<HeroSlider
slidingAnimation="left_to_right"
orientation="horizontal"
initialSlide={1}
onBeforeChange={(previousSlide, nextSlide) =>
console.log("onBeforeChange", previousSlide, nextSlide)
}
onChange={nextSlide => console.log("onChange", nextSlide)}
onAfterChange={nextSlide => console.log("onAfterChange", nextSlide)}
style={{
backgroundColor: "rgba(0, 0, 0, 0.33)"
}}
settings={{
slidingDuration: 250,
slidingDelay: 100,
shouldAutoplay: true,
shouldDisplayButtons: true,
autoplayDuration: 5000,
height: "100vh"
}}
>
<Slide
background={{
backgroundImage: giauPass,
backgroundAttachment: "fixed"
}}
/>
<Slide
background={{
backgroundImage: bogliasco,
backgroundAttachment: "fixed"
}}
/>
<Slide
background={{
backgroundImage: countyClare,
backgroundAttachment: "fixed"
}}
/>
<Slide
background={{
backgroundImage: craterRock,
backgroundAttachment: "fixed"
}}
/>
<Nav />
</HeroSlider>
);
};
export default BasicSlider;
Here is app.js
import React from 'react'
import './app.css'
import BasicSlider from './containers/basicslider/BasicSlider';
const App = () => {
return (
<div className='App'>
<BasicSlider/>
</div>
)
}
export default App
Here is my index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
Everything is fine. No error. No warning. Just it shows like this
enter image description here
I want to make the images visible. How can I solve it?

Answer 1

You cannot add component as backgroundImage, the correct way:
<Slide
background={{
backgroundImageSrc: bogliasco,
backgroundAttachment: "fixed"
}}
/>