Vue.js 数据绑定样式背景图像不起作用

问题是 backgroundImage 的值需要是这样的字符串：

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

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

回复：下面关于烤肉串案例的评论，这是您可以做到这一点的方法：

<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 所需的转义是不值得的。

更多信息在这里： 引用 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})` }">

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

我在这篇文章中搜索了一下，但没有人用dynamic文件名发布require这就是我发布它的原因。

:style="{ backgroundImage: `url(${require('@/assets/' + banner.image)})` }"

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

网页代码

<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 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+')'
                }
            },
}

尝试 encodeURI（）

遇到的问题是由于我尝试使用的 URL 中的特殊字符和/或空格。

所以我不得不改变这个：

:style="{ backgroundImage : 'url(' + item.media.url + ')' }"

对此：

:style="{ backgroundImage : 'url(' + encodeURI(item.media.url) + ')' }"

使用 v-for 循环中的动态值绑定背景图像样式可以像这样完成。

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

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

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

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

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

确保您的背景图像声明用 url（ 和引号括起来，以便样式正常工作，无论文件名如何。

ES2015 风格：

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

或者没有ES2015：

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

来源： vuejs/vue-loader issue #646

我使用 VUE 选项 （~@/）

我定义了一个类

<template>
   <v-container class="bgExampleClass" fuild>
      <!-- Content-->
   </v-container>
</template>
<script></script>
<style>
  .bgExampleClass{
    background-image: url('~@/assets/imgs/backgroundExample.jpg');
  }
</style>

根据我的知识，如果您将图像文件夹放在公用文件夹中，则可以执行以下操作：

   <div :style="{backgroundImage: `url(${project.imagePath})`}"></div>

如果将图像放在src/assets/中，则需要使用 require。喜欢这个：

   <div :style="{backgroundImage: 'url('+require('@/assets/'+project.image)+')'}">. 
   </div>

一件重要的事情是，您不能使用包含完整 URL 的表达式，例如 project.image = '@/assets/image.png' .您需要对'@assets/'部分进行硬编码。这就是我的发现。我认为原因是在 Webpack 中，如果您的需求包含表达式，则会创建一个上下文，因此在编译时不知道确切的模块。相反，它将搜索@/assets文件夹中的所有内容。更多信息可以在这里找到。这是另一个文档，解释了 Vue 加载器如何处理单个文件组件中的链接。

vuejs 中通过样式标签添加背景图像的最简单

<style>
.somediv {
 background-image: url('~@/image-path')
}
</style>
you need to add `~` before source alias

我推荐的解决方案，无需修改太多的小提琴代码，只需要进行简单的调整：

引用 Vue.js v2 文档的片段;

模板内表达式非常方便，但它们用于简单的操作。在模板中放置太多逻辑会使它们臃肿且难以维护。

由于它适用于这种情况（假设 image 数据属性的值/状态不太可能更改），使用计算属性将使模板更简洁且更易于维护。参见重构 --

<!-- HTML -->
<div id="app"></div>

// JS
var template = "<div class='"circular'" v-bind:style='"imageUrl'"></div>";
var el = document.querySelector("#app");
var data = {
    image: "http://1.bp.blogspot.com/-8PfnHfgrH4I/TylX2v8pTMI/AAAAAAAAJJ4/TICBoSEI57o/s1600/search_by_image_image.png"
};
new Vue({
    el: el,
    replace: false,
    template: template,
    data: data,
    computed: {
        imageUrl: function() {
            return {'background-image': `url(${this.image})`}
        }
    }
})

<template>
  <section :style="banner"></section>
</template>

<script>
import banner from "@/assets/images/banners/rectangle1.png";
export default {
  data() {
    return { banner: { backgroundImage: `url('${banner}')` } };
  },
};
</script>

我必须在require后添加.default才能正常工作：

:style="{ backgroundImage: `url(${require('@/media/bg-1.jpg').default})` }"

这也适用于：

    let path = require(`@/assets/images/${this.linkToImage}`);
    variableName = `background-image: url('${path}'); `

它对我有用

<div class="project" v-for="(project, index) in projects" :key="index">
      <div class="project-img">
        <div class="img-wrapper" :style="{ backgroundImage: `url(${project.imgUrl})` }">
        </div>
      </div>
    </div>

imgUrl: 'http://localhost:8080/img/lp-nike-1280x800.19e4d289.png'