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

Question

我试图在一个元素中绑定图像的src,但它似乎不起作用.我得到一个"无效的表达式.生成的函数体:{backgroundImage:{url(image)}".

该文件说要使用'烤肉串案例'或'驼峰案例'.

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

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

Answer 1

问题是需要的值是这样的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所需的转义是不值得的.

更多信息: 引用url()的值真的有必要吗？

Answer 2

另一种解决方案：

<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 3

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

Answer 4

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

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

Answer 5

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

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

Answer 6

我尝试了@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})`;
},