问题是 backgroundImage 的值需要是如下所示的字符串：

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

这是一个有效的简化小提琴： https://jsfiddle.net/89af0se9/1/

Re:下面关于kebab-case的评论，你可以这样做：

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

换句话说， 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所需的转义是不值得的。

更多信息请点击此处： Is quoting the value of url() really necessary?

另一种解决方案：

<template>
  <div :style="cssProps"></div>
</template>
<script>
  export default {
    data() {
      return {
        cssProps: {