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

Question

我正在尝试在元素中绑定图像的 src，但它似乎不起作用。我收到 "Invalid expression. Generated function body: { backgroundImage:{ url(image) }".

documentation 表示使用 'Kebab-case' 或 'camel-case'。

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

这是一个fiddle：https://jsfiddle.net/0dw9923f/2/

Answer 1

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

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

这是有效的简化 fiddle：https://jsfiddle.net/89af0se9/1/

回复：下面关于 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?

Answer 2

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

Answer 3

对于单个重复组件，此技术对我有用

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

另一个解决方案：

<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() 总是相对于当前文件的路径。

Answer 7

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

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

Answer 8

我尝试了 @david 回答，但它没有解决我的问题。经过很多麻烦，我做了一个方法和 return 带有样式字符串的图像。

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})`;
},

Answer 9

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

确保您的 backgroundImage 声明包含在 url( 和引号中，以便样式正常工作，无论文件名如何。

ES2015 风格：

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

或者没有 ES2015:

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

来源：vuejs/vue-loader issue #646

Answer 10

据我所知，如果您将图像文件夹放在 public 文件夹中，您只需执行以下操作：

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

如果你把你的图片放在src/assets/，你需要使用require。像这样：

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

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

Answer 11

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

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

Answer 12

我在这个 post 中搜索过，但没有人 post 使用 dynamic 文件名编辑 require，这就是我 post 搜索它的原因。

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

Answer 13

试试encodeURI()

我遇到的问题是由于我尝试使用的 URL 中的特殊字符 and/or 空白。

所以我不得不改变这个：

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

为此：

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

Answer 14

我使用 VUE 选项 (~@/)

我定义了一个class

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

Answer 15

在vue js中通过style标签添加背景图片最简单的方法是

<style>
.somediv {
 background-image: url('~@/image-path')
}
</style>

you need to add `~` before source alias

Answer 16

我推荐的解决方案，不需要修改太多 fiddle 代码，只需要一个简单的调整：

引用一个snippet of the Vue.js v2 documentation;

In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain.

因为它适用于这种情况，（假设 image 数据属性的 value/state 不太可能改变），使用计算的属性将使您的模板更清洁，更易于维护。请参阅重构 --

<!-- 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})`}
        }
    }
})

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

Vue.js data-bind style backgroundImage not working

html

javascript

css

vue.js