Vue 正在删除带有样式属性的背景图像 [英] Vue is removing a background-image in and with the style attribule

问题描述

出于某种原因，vue 正在删除样式属性和背景图像.这个标签

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.

我注释掉了我所有的组件，它似乎是 Vue 根实例.

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;
    }
} */
}); 

奇怪的是，它似乎只是 background: url 属性有问题，因为当我使用这样的东西时它工作得很好:

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>

我想知道这是一个错误，还是 Vue 保留了 url?

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

也许是因为 :url() ?

如果是这样，我该如何逃避?

If so how do I escape this?

推荐答案

style 属性不应包含任何换行符.这工作得很好

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

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

演示:

1. 工作 ~ http://jsfiddle.net/krz1gvqt/
2. 不工作~http://jsfiddle.net/krz1gvqt/2/

这篇关于Vue 正在删除带有样式属性的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！