Currently, I am utilizing Vue's v-bind:style feature to set the background of a div, which is functioning properly. However, I am facing an issue when attempting to use background in combination with image-set(). When using a regular background-image, everything works as expected, but when using image-set() as a value, nothing is displayed.
I have created a simple version on JSbin where it surprisingly works without any problems. This has left me puzzled because when I try it locally, the images fail to appear. Additionally, there are no errors or warnings in the console or by Grunt.
Here is a simplified version of the code:
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;
}
}
});
The HTML structure is as follows:
<div id="app">
<div class="test" v-bind:style="bg()"></div>
</div>
As a newcomer to Vue, I understand that debugging a working code can be challenging (especially since JSBin is functioning well). However, I would appreciate any insights from experienced individuals on where I should focus my troubleshooting efforts.