const bannerData = [{
    "title": "My title",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molest",
    "image_url": "./assets/bg-1.jpg"
  },
  {
    "title": "My title2",
    "description": "dwadawdwa",
    "image_url": "https://img2.storyblok.com/f/89778/1168x728/578a7ddf01/us_us-ny_nyc_1.jpeg"
  }
]

function initBanner(currentSlide) {
  banner.style.backgroundImage = `url('${bannerData[currentSlide].image_url}')`
  textBoxHeading.textContent = `${bannerData[currentSlide].title}`
  textBoxDescription.textContent = `${bannerData[currentSlide].description}`
}

Whenever I do in my index.html <img src="./assets/bg-1.jpg"> then I am seeing the image in my html. But whenever I try to load the background for element with js then it wont load at all. I have to use url in order for it to work. Why is this happening and how can I link backgrounds from my folder instead from url's? I am not getting any errors in console, and just have white blank screen with no img.