Vue通过background:url 引入静态图片失效

例如

<div :style="{background:'url('+img.url+')',backgroundSize:'100% 100%'}">
    ......
</div>

.......

img:{
    url:'../../assets/bg.png',
    name: 'bg'
}

发现设置背景失败了，图片加载不出来，主要原因是background:url中的地址是css针对与图片的地址，地址不正确。

解决方案：

使用require将图片动态加载进来，如果图片小于4k就会转换成base64格式的，否则会修改图片的地址

<div :style="{background:'url('+img.url+')',backgroundSize:'100% 100%'}">
    ......
</div>

.......

img:{
    url:require('../../assets/bg.png'),
    name: 'bg'
}

https://www.cnblogs.com/ruixiazhixia/p/5548238.html

Vue引入图片的几种方式

https://blog.csdn.net/aithena/article/details/94123602