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...

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b47218-2c85c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b47218-2c85c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?