vue学习笔记一:vue项目中设置背景图片
这几天在用vue开发一个项目,真的是到处都是坑啊,就连设置图片背景,也和前面用的不一样了,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,background:url("../static/img/icon.png") no-repeat;background-size:cover;width:10rem;height:5rem;用了这个就报了一堆
·
这几天在用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>
进行了数据绑定,解决了设为背景的问题。
更多推荐
已为社区贡献21条内容
所有评论(0)