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

本文探讨了在Vue中设置背景图片时遇到的问题,图片无法正常显示。问题根源在于CSS中图片路径配置错误。文章提供了通过require动态加载图片的解决方案,确保图片正确显示,并在图片小于4k时转换为base64格式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

例如

<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.youkuaiyun.com/aithena/article/details/94123602

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值