这几天在用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>

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

Logo

前往低代码交流专区

更多推荐