Actualmente estoy usando v-bind:style de Vue para configurar el fondo de un div. Esto funciona bien. Sin embargo, ahora estoy tratando de usar el fondo en combinación con image-set() . Cuando se muestra una imagen de fondo regular, el image-set() como valor no devuelve nada en absoluto.

Hice una copia muy simple en JSbin que sorprendentemente funciona, lo que me deja sin idea. Porque cada vez que pruebo este local, no se muestran imágenes. Tampoco recibo ningún error o advertencia en la consola o por parte de Grunt.

Una versión muy simplificada del código es:

 new Vue({ el: "#app", data: { }, methods: { bg: function () { /* Test image, is dynamic in code */ var url = "https://picsum.photos/200/200.webp"; var bg; /* This background works locally */ bg = "background-image: url('"+ url +"');"; /* This doesn't work locally */ bg = "background-image:-webkit-image-set(url('"+ url +"')2x,url('"+ url +"')2x);background-image:image-set(url('"+ url +"')2x,url('"+ url +"')2x);"; return bg; } }

});

El HTML se ve así:

 <div id="app"> <div class="test" v-bind:style="bg()"></div> </div>

Soy muy nuevo en Vue y entiendo que es difícil depurar un código que funciona (ya que JSBin está funcionando). Pero quizás las personas más experimentadas aquí tengan una idea en qué dirección podría mirar.