Vue binding inline style setting why the background picture is not displayed?

1. Bind inline style setting why the background picture is not displayed?
the same DIV can be displayed by setting the background image through ID in CSS

2.

  <div id="test" 
  :style="{ backgroundImage:"url("+"./assets/logo.png"+")", backgroundSize:"cover",
  backgroundPosition:"center center"}" ></div>
  
    -sharptest {
    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. As shown in figure

and I found that the image path set in CSS is rendered in the browser as
background: url (/ img/logo.82b9c7a5.png);
so

May.27,2022

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

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

Why? Because your picture is to be packaged by webpack, you can't write it this way. Writing in html will not help you deal with it. You can add the img of require to deal with it, and there is css-loader processing in the style.


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

string concatenation of inline url


because width and height are not set in your inline style, they are all set in your css , but not in
https://jsfiddle.net/EverJust...

.
Menu