例如

<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

Logo

前往低代码交流专区

更多推荐