首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vue.js数据绑定样式的backgroundImage不起作用

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

Stack Overflow用户
提问于 2016-02-06 22:42:09
回答 9查看 222.2K关注 0票数 119

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

documentation说使用‘烤肉串’或者‘骆驼包’。

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

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

EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2016-02-07 01:36:02

问题是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?

票数 270
EN

Stack Overflow用户

发布于 2018-08-31 04:45:09

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

Stack Overflow用户

发布于 2019-06-13 04:30:13

另一种解决方案:

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

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

是什么让这个解决方案更方便?首先,它更干净。然后,如果您使用的是Vue CLI (我假设您使用的是Vue CLI),则可以使用webpack加载它。

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

票数 26
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35242272

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档