Vue使用:内联style动态绑定backgroundImage/background

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>

以上是vue2的方法，后期继续分享vue3的动态绑定background属性的方法