有个小需求,原本图片是网络的 直接通过这种方式就能调到 如下
min-height: 100vh;
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-image: url(http://codegen.caihongy.cn/20201223/fa6532cc6f56497687271741a8192150.jpg);
但现在要改成本地的,难顶? 由于非专业前端,试了好久,还在网上找了很多,都不实用,估计是不适用,请教了前端的朋友,一下子就好了。
如下图:
左边是我目录结构,要在login里面加bg.jpg,? 仅对我而言 把样式代码写在return里面 bgimgUrl用的node的require方法 ,然后再在标签里面加上style 就可以了 写法如下?
?
?
?
代码如下
?
bgurl: {
backgroundImage: "url(" + require("../assets/img/bg.jpg") + ")",
backgroundRepeat:'no-repeat',
backgroundSize: "cover",
minHeight: "100vh",
position: "relative",
backgroundPosition: "center center",
},
<div class="container loginIn" :style="bgurl">
完美解决
btw,
login.vue是在views目录下,当../的时候就到了src的目录下,所以这里我写成了../assets/img/bg.jpg
|