Vue.js数据绑定样式backgroundImage不起作用

我正在尝试将图像的src绑定到元素中，但似乎无法正常工作。我收到一个“无效的表达式。生成的函数主体：{backgroundImage：{url（image）}”。

该文档说使用“ Kebab-case”或“ camel-case”。

<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>

这是一个小提琴：https : //jsfiddle.net/0dw9923f/2/

问题是for的值backgroundImage必须是这样的字符串：

<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div>

这是一个正在工作的简化小提琴：https : //jsfiddle.net/89af0se9/1/

回复：下面关于kebab-case的评论，这是您可以执行的操作：

<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>

换句话说，for的值v-bind:style只是一个纯Javascript对象，并且遵循相同的规则。

更新：另一则说明为什么您可能无法使它正常工作。

您应该确保用image引号引起来，以便最终结果字符串为：

url('some/url/path/to/image.jpeg')

否则，如果图像URL中包含特殊字符（例如空格或括号），则浏览器可能无法正确应用它。在Javascript中，分配如下所示：

this.image = "'some/url/path/to/image.jpeg'"

要么

this.image = "'" + myUrl + "'"

从技术上讲，可以在模板中完成此操作，但是保留有效HTML所需的转义操作不值得。

更多信息在这里： 真的需要引用url（）的值吗？

<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>

另一个解决方案：

<template>
  <div :style="cssProps"></div>
</template>

<script>
  export default {
    data() {
      return {
        cssProps: {
          backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`
        }
      }
    }
  }
</script>

是什么使该解决方案更方便？首先，它更清洁。然后，如果您使用的是Vue CLI（我想是的话），则可以使用webpack加载它。

注意：不要忘记它require()总是相对于当前文件的路径。

<div :style="{ backgroundImage: `url(${post.image})` }">

有多种方法，但是我发现模板字符串简单易用

可以使用来自v-for循环的动态值来绑定背景图像样式。

<div v-for="i in items" :key="n" 
  :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>

对于单个重复组件，该技术工作对我而言

<div class="img-section" :style=img_section_style >

computed: {
            img_section_style: function(){
                var bgImg= this.post_data.fet_img
                return {
                    "color": "red",
                    "border" : "5px solid ",
                    "background": 'url('+bgImg+')'
                }
            },
}

我尝试了@david答案，但没有解决我的问题。经过很多麻烦之后，我制作了一个方法，并使用样式字符串返回了图像。

HTML代码

<div v-for="slide in loadSliderImages" :key="slide.id">
    <div v-else :style="bannerBgImage(slide.banner)"></div>
</div>

方法

bannerBgImage(image){
    return 'background-image: url("' + image + '")';
},

我遇到了一个问题，其中背景图像的文件名中带有空格，导致不应用样式。为了解决这个问题，我必须确保将字符串路径封装在单引号中。

请注意以下示例中的转义\'。

<div :style="{
    height: '100px',
    backgroundColor: '#323232',
    backgroundImage: 'url(\'' + event.image + '\')',
    backgroundPosition: 'center center',
    backgroundSize: 'cover'
    }">
</div>

可接受的答案似乎并没有为我解决问题，但这确实

确保您的backgroundImage声明用url（和引号引起来）封装，这样无论文件名如何，样式都能正常工作。

ES2015风格：

<div :style="{ backgroundImage: `url('${image}')` }"></div>

或没有ES2015：

<div :style="{ backgroundImage: 'url(\'' + image + '\')' }"></div>

资料来源：vuejs / vue-loader问题＃646