vue.js改背景图片的方法-创新互联
小编给大家分享一下vue.js改背景图片的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司服务项目包括毕节网站建设、毕节网站制作、毕节网页制作以及毕节网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,毕节网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到毕节省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!vue.js改背景图片的方法:通过行内样式将样式引入,使用【require()】方法,代码为【
】。
vue.js改背景图片的方法:
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式:
background:url("../../assets/left-bg.jpg");
这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题,方法如下:
在data中定义如下:
data() { return { leftBg: { background: "#235d8b url(" + require("./assets/left-bg.png") + ") no-repeat scroll 0 bottom", }, topBg: { background: "#235d8b url(" + require("./assets/top-bg.png") + ") no-repeat scroll right 0", height: '80px' } } }
其中使用require()方法,require()
是node.js方法。
通过行内样式将样式引入:
以上是“vue.js改背景图片的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享标题:vue.js改背景图片的方法-创新互联
文章转载:http://scyanting.com/article/ceijij.html