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

 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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐