vue学习笔记一：vue项目中设置背景图片

这几天在用vue开发一个项目，真的是到处都是坑啊，就连设置图片背景，也和前面用的不一样了，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，

background:url("../static/img/icon.png") no-repeat;
background-size:cover;
width:10rem;
height:5rem;

用了这个就报了一堆错,后来在网上找到了正确的资源
如下：

 data() {
      return {
        note: {
          backgroundImage: "url(" + require("../../static/img/icon2.png") + ") ",
          backgroundPosition: "center center",
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
        },
        data1:"",
        data2:"",

      }
    },

 <div class="img1 note" :style ="note">
      <div class="note1">近三个月累计交易额</div>
      <div class="note2">{{data1}}元</div>
      <div class="note1">近三个月注册用户</div>
      <div class="note2">{{data2}}人次</div>
 </div>

进行了数据绑定，解决了设为背景的问题。