我正在尝试将图像的 src 绑定到元素中，但它似乎不起作用。我收到“无效的表达式。生成的函数体：{ backgroundImage:{ url(image) }”。
documentation 表示使用“Kebab-case”或“camel-case”。
<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>
这是一个小提琴：https://jsfiddle.net/0dw9923f/2/
【问题讨论】：
标签： javascript html css vue.js
我推荐的解决方案，无需修改太多小提琴代码，只需要简单的调整：
引用snippet of the Vue.js v2 documentation;
模板内表达式非常方便，但它们用于简单的操作。在模板中放入过多的逻辑会使它们变得臃肿且难以维护。
因为它适用于这种情况，（假设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})`}
}
}
})
【讨论】：
在 vuejs 中通过 style 标签添加背景图片最简单的方法是
<style>
.somediv {
background-image: url('~@/image-path')
}
</style>
you need to add `~` before source alias
【讨论】：
我使用 VUE 选项 (~@/)
我定义了一个类
<template>
<v-container class="bgExampleClass" fuild>
<!-- Content-->
</v-container>
</template>
<script></script>
<style>
.bgExampleClass{
background-image: url('~@/assets/imgs/backgroundExample.jpg');
}
</style>
【讨论】：
试试 encodeURI()
我遇到的问题是由于我尝试使用的 URL 中的特殊字符和/或空格造成的。
所以我不得不改变这个：
:style="{ backgroundImage : 'url(' + item.media.url + ')' }"
到这里：
:style="{ backgroundImage : 'url(' + encodeURI(item.media.url) + ')' }"
【讨论】：
我在这篇文章中进行了搜索，但没有人发布 require 和 dynamic 文件名，这就是我发布它的原因。
:style="{ backgroundImage: `url(${require('@/assets/' + banner.image)})` }"
【讨论】：
我必须在 require 之后添加 .default 才能使其工作：
:style="{ backgroundImage: `url(${require('@/media/bg-1.jpg').default})` }"
【讨论】：
据我所知，如果您将图像文件夹放在公用文件夹中，您可以执行以下操作：
<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。这是另一个doc 解释了 Vue 加载器如何处理单个文件组件中的链接。
【讨论】：
另一种解决方案：
<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() 总是相对于当前文件的路径。
【讨论】：
接受的答案似乎没有为我解决问题，但确实
确保您的 backgroundImage 声明包含在 url( 和引号中，以便样式正常工作，无论文件名如何。
ES2015 风格：
<div :style="{ backgroundImage: `url('${image}')` }"></div>
或者没有 ES2015：
<div :style="{ backgroundImage: 'url(\'' + image + '\')' }"></div>
【讨论】：
我尝试了@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 + '")';
},
【讨论】：
methods。这就是computed 的用途..
<div :style="{ backgroundImage: `url(${post.image})` }">
有多种方法，但我发现模板字符串简单易行
【讨论】：
<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>
【讨论】：
对于单个重复组件，这项技术对我有用
<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+')'
}
},
}
【讨论】：
我遇到了一个问题，即文件名中带有空格的背景图像导致样式无法应用。为了纠正这个问题，我必须确保字符串路径被封装在单引号中。
请注意下面我的示例中的转义 \'。
<div :style="{
height: '100px',
backgroundColor: '#323232',
backgroundImage: 'url(\'' + event.image + '\')',
backgroundPosition: 'center center',
backgroundSize: 'cover'
}">
</div>
【讨论】：
使用 v-for 循环中的 dynamic 值绑定背景图像样式可以像这样完成。
<div v-for="i in items" :key="n"
:style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>
【讨论】：
问题是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 所需的转义是不值得的。
【讨论】：
backgroundImage) 而不是烤肉串式 (background-image)，尽管文档说它可以是任何一个。
backgroundImage: image 而不是backgroundImage: 'url('+image+')'。我对 vue 语法太着迷了，以至于忘记了url()。
v-bind:style="{ 'background-image': url(image) }"，但在组件之外（只是在常规页面上）似乎需要将 url 放在引号中。有谁知道为什么会这样？