There appears to be an issue where Vue is removing both the style attribute and the background image from this tag.
<section style="background:
url(images/banners/profiles/profile-banner-1.png);" class="profile-banner flex items-end md:items-end md:justify-center p-8">
</section>
Upon reloading the page, the background image briefly appears before disappearing again.
After testing by commenting out all components, it seems that the root instance of Vue is causing the problem.
const app = new Vue({
el: '#app',
/*data() {
return {
modal: false,
content_type: ''
}
},
methods: {
openModal: function(content_type){
this.modal = !this.modal;
}
} */
});
Interestingly, it appears that the issue specifically pertains to the 'background: url' property, as using a simple color like black works fine:
<section style="background: black;" class="profile-banner flex items-end md:items-end md:justify-center p-8">
</section>
Could this be a bug? Or is 'url' perhaps a reserved keyword in Vue?
Is there a way to escape this issue with ':url()'?