Javascript- How do I change the background-image property in css?

Question

With Javascript, I am trying to change the background-image on my web app.

Here is how Im trying to do it:

const bgimg = {
   backgroundImage: "URL('../../Images/arches.JPG')"
    }

<div style={bgimg} id="bg_img">

This method works fine when I use a pic from the internet with it's url, but it wont let me add a local image. I can use the same pictures on my computer if I implement it right in css, like

.container_image {
  background-image: url(./Images/yellow_stone_copy.JPG)
}

But I want to be able to change the background, while it's running, to an image on my computer. What am I doing wrong?

Answer 1

Make sure the url of the image you want to use is relative to the html file and not to the js file