I am trying to change the div images in a way that respects the city name. I was thinking of taking these' images and calling them "image1.jpg" and so on.

I don't understand why even though the url is correct (looking at the console log). [console.log][1]

Javascritpt

        
         //CHANGE IMAGE
        let divFoto = document.querySelectorAll('.viaggi-foto');
        for(let i = 0; i < divFoto.length; i++){
            divFoto[i].style.backgroundImage = `"url('../img/luogo${divFoto[viaggio.id]}.jpg')"`;
            divFoto[i].style.backgroundSize = 'cover';
            divFoto[i].style.backgroundPosition = 'center';
            console.log("bg: ", divFoto[i].style.backgroundImage);
        }
    });

   
}

Css

  .viaggi-foto{
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: "";
  }


  [1]: https://i.stack.imgur.com/w2L94.png