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

最新推荐文章于 2024-07-16 20:23:58 发布

bdlaxx

最新推荐文章于 2024-07-16 20:23:58 发布

阅读量1.8w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue+iView爬坑系列

本文链接：https://blog.youkuaiyun.com/mianyao1004/article/details/103635144

Vue+iView爬坑系列专栏收录该内容

53 篇文章

订阅专栏

本文探讨了在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