Vue 绑定内联样式设置背景图片为什么会不显示？

Question

1.绑定内联样式设置背景图片为什么会不显示？
同一个DIV，在CSS里通过ID设置背景图片就能显示

2.

  <div id="test" 
  :style="{ backgroundImage:'url('+'./assets/logo.png'+')', backgroundSize:'cover',
  backgroundPosition:'center center'}" ></div>
  
    #test {
    width: 700px;
    height: 500px;
    margin: 0 auto;
    border: 1px black solid;
    background: url('./assets/logo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    }

3.如图

而且我发现在CSS里设置的图片路径，在浏览器是渲染成：
background: url(/img/logo.82b9c7a5.png);
这样

Answer 1

为什么呢？因为你的图片是要经过webpack打包的，你这样写是不行的，在html里面写是不会帮你处理的，要处理可以加require 这个img，写在样式里面有css-loader处理。

Answer 2

<div class="login-vue" :style="bg"></div>

this.bg.backgroundImage = 'url(' + require('../../assets/bg0' + new Date().getDay() + '.jpg') + ')'

Answer 3

<div id="test" 
  :style="{ backgroundImage:'url('+require('./assets/logo.png')+')',backgroundSize:'cover',
  backgroundPosition:'center center'}" ></div>

Answer 4

内联 url的字符串拼接已经错了

Answer 5

因为你的内联样式里没有设置宽高呀，你的css里都设置了，内联却没有
https://jsfiddle.net/EverJust...