$ref.style.backgroundImage not working

Hi everyone, I’m trying to set images as background when I select them in input type="file" to make them fit into the div but backgroundImage is not working:

<li v-if="urls" v-for="(url, key) in urls" :key="key">
    <div id="preview" :ref="'url'" class="pics-list-image-container img-fluid"></div>
    <!-- <img class="selected-imgs" :ref="'url'" /> -->
</li>

onFileChange: function (e) {
     var files = e.target.files;
     for (let i = 0; i < files.length; i++) {
         this.urls.push(files[i]);
     }
     for (let i = 0; i < this.urls.length; i++) {

         let reader = new FileReader();
         reader.onload = (e) => {
            
             // this is working fine
             this.$refs.url[i].style.backgroundColor = '#555555'; 

             // but this is not working
             this.$refs.url[i].style.backgroundImage= reader.result;

          };

          reader.readAsDataURL(this.urls[i]);

      }
}

backgroundColor is working fine but backgroundImage is not working. Is there a way to make it work?

You need to specify that it’s a url:

this.$refs.url[i].style.backgroundImage = `url('${reader.result}')`;

Oh, yes. Thank you so much. I’m getting an error:

Get  http://localhost/dashboard/%7Bdata:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwM... 414 (Request-URI Too Long)

Can you help me with that?

Solved by changing

this.$refs.url[i].style.backgroundImage = `url('${reader.result}')`;

to

this.$refs.url[i].style.backgroundImage = 'url(' + reader.result + ')';