index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片

snowDreamzzz

于 2023-05-12 16:11:38 发布

阅读量878

点赞数

CC 4.0 BY-SA版权

分类专栏： pits 文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qubes/article/details/130644673

pits 专栏收录该内容

190 篇文章

订阅专栏

微信小程序由于其自身限制无法直接使用本地图片路径，解决方案是将图片转换为base64编码。在CSS中，将背景图像的URL改为data:image/png;base64,后接图片的base64编码，这样可以在不同像素比下显示图片。

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

problem

微信小程序background-image不能加载本地图片

reason

微信小程序的限制

solution

将本地图片转成base64
工具: https://tool.chinaz.com/tools/imgtobase

/* before */
.card .content .title-bg  {
    background-image: url(../../image/title_bg@2x.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .card .content .title-bg  {
        background-image: url(../../image/title_bg@2x.png);
    }
}

/* after */
.card .content .title-bg  {
    background-image: url('data:image/png;base64,xxx');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .card .content .title-bg  {
        background-image: url('data:image/png;base64,yyy');
    }
}