Vue cannot display background picture

<li style="background-image: url(../../assets/images/indexbg1.png);"></li>

li{
    width: 258px;
    height: 100px;
    background-size: 100%;
}

this code should be okay, right? But the picture (development environment) cannot be displayed

to prove that the picture path is correct, I used the img tag and tried again

<img src="../../assets/images/indexbg1.png"> //

so it"s strange here, why can img display pictures, but not background images? And it"s the same picture path.

Feb.15,2022

use: style instead of style.

it is recommended to read more documents

you can use img instead of putting the picture under the static folder to introduce the relative path

if you have to use the background.

or if your picture has an absolute path, you can also directly introduce

with the background on dom.

display:inline-block

url path is incorrect. When using style, the path is not compiled

v-bind:style="{ backgroundImage: url('url') }"

url path is not correct. When using style, the path is not compiled. Bind

:style = "background-image: url(../../assets/images/indexbg1.png)"

Previous: In the vue environment, ElementUI is too slow, what are the high-performance tableUI components?

Next: The problem of excessively long text ellipsis