您好,登录后才能下订单哦!
小编给大家分享一下vue.js改背景图片的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
vue.js改背景图片的方法:通过行内样式将样式引入,使用【require()】方法,代码为【<div :style ="leftBg"></div>】。
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方法。
通过行内样式将样式引入:
<div :style ="leftBg"></div>
以上是“vue.js改背景图片的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。