Js 数据绑定样式 backoundImage 无法工作

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

对于单个重复的成分，这种技术为我工作

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

使用 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>

另一个解决办法:

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

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

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

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

确保 backoundImage 声明包装在 url (和引号中，这样无论文件名如何，样式都能正确工作。

ES2015风格:

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

或者没有 ES2015:

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

资料来源: Vuejs/vue-loader 问题 # 646

据我所知，如果您将您的图像文件夹放在您的公用文件夹中，您只需要执行以下操作:

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

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

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

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

我必须在 require之后加入 .default才能起作用:

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

我在这篇文章中搜索，但没有人张贴 require与 dynamic文件名，这就是为什么我张贴它。

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

尝试 encodeURI ()

这个问题是由于我试图使用的 URL 中的特殊字符和/或空格引起的。

所以我不得不改变这一点:

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

这样说:

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

我使用 VUE 选项(~@/)

我定义了一个类

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

在 vuejs 中，通过样式标签添加背景图像最简单的方法是

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


you need to add `~` before source alias

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

引用 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>