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

<div&nbsp;class="login-vue"&nbsp;:style="bg"></div>this.bg.backgroundImage&nbsp;=&nbsp;'url('&nbsp;+&nbsp;require('../../assets/bg0'&nbsp;+&nbsp;new&nbsp;Date().getDay()&nbsp;+&nbsp;'.jpg')&nbsp;+&nbsp;')'

Answer 2

你试一试不用url包裹。

Answer 3

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