1.直接在vue中使用style内联样式设置background或backgroundImage是无效的；比如这样写无效：
<div style="background: url('../../assets/import/aa1.png')">
内容。。。
</div>
2.必须使用拼接；但是直接拼接也是无效的；比如这样写无效：
<div :style="{backgroundImage: 'url('+bgImage+')'}">
内容。。。
</div>
data(){
return {
bgImage: '../../assets/import/aa1.png'
}
}
3.必须需要require引入才可以进行拼接：以下是正确方法：
<div :style="{backgroundImage: 'url('+bgImage+')'}">
内容。。。
</div>
data(){
return {
bgImage: require('../../assets/import/aa1.png')
}
}
4.注意这样拼接也是无效的：
<div :style="{backgroundImage: 'url('+bgImage+'1.png)'}">
内容。。。
</div>
data(){
return {
bgImage: require('../../assets/import/aa')
}
}
补充：除了这种拼接方法，你也可以这样写：
<div :style="backgroundDiv" class="background-img"></div><script>
export default {
data () { return {
backgroundDiv: {
backgroundImage: 'url(' + require('../assets/images/1.jpg') + ')',
}
}
}
}</script>
<style scoped>
.background-img {
background: no-repeat center top;
background-size: contain;
height: 150px;
}
</style>
原文链接：https://blog.csdn.net/weixin_51747462/article/details/129045533
标签：style,Vue,return,..,拼接,backgroundImage,background,data From： https://www.cnblogs.com/lenhui/p/17370765.html