Vue is removing a background-image in and with the

Question

For some reason vue is removing both the style attribute and the background image. 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>

The background image will flash when I reload the page, but then be removed.

I commented all of my components out and it seems that it's the Vue root instance.

const app = new Vue({
el: '#app',


/*data() {
    return {
        modal: false,
        content_type: ''

    }
},
methods: {
    openModal: function(content_type){
        this.modal = !this.modal;
    }
} */
}); 

The stranger thing is that it seems to just have a problem with the background: url property since when I use something like this it works perfectly fine:

<section style="background: black;" class="profile-banner flex items-end md:items-end md:justify-center p-8">

</section>

I'm wondering if this is a bug, or maybe Vue has reserved url?

Maybe it's because :url() ?

If so how do I escape this?

Answer 1

The style attribute should not have any newline characters. This works just fine

<section style="background: url(images/banners/profiles/profile-banner-1.png);" .../>

Demos:

1. Working ~ http://jsfiddle.net/krz1gvqt/
2. Not working ~ http://jsfiddle.net/krz1gvqt/2/