VUE设置本地背景图片

有个小需求，原本图片是网络的 直接通过这种方式就能调到 如下

 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