[JavaScript知识库]VUE 动态绑定背景图片（:style）需要用require包裹

我们前端开发过程中给元素设置背景图片是我们很常规的操作，但是我们也会遇到一些场景需要我们动态的配置背景图片的路径。

对于这样的情况我们就需要用动态绑定样式style，具体的内容如下：

Class 与 Style 绑定 — Vue.js

我们按照文档的编写的代码（没有用require包裹）：

<template>
  <div>
    <div class="img" v-for="item in imgArr" :key="item" :style="{'backgroundImage': 'url(' + item.url + ')'}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgArr:[
        {
          url:'../assets/fan.jpeg'
        },
         {
          url:'../assets/circle.jpeg'
        }
      ]
    };
  },
};
</script>
<style scoped>
.img{
  width: 250px;
  height: 250px;
  margin-left: 20px;
  float: left;
  background-size: 100% 100%;
  border: 1px solid #434343;
}
</style>

发现是这样并没有生效：

那再用require包裹之后的呢

      imgArr:[
        {
          url:require('../assets/fan.jpeg')
        },
         {
          url:require('../assets/circle.jpeg')
        },
        {
          url:require('../assets/set.jpeg')
        }
      ]

成功设置了背景图片了:?