CSS 背景图片编译到小程序时未自动转换为 base64

[LeopoldChou]

trafficstars

教程文档中写到：

“为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式”

实测在前文已经出现在 image 的 url 中的图片在后文 scss 未能自动转换为 base64，具体代码如下：

<template>
    <view>
        <view><image src="~@/static/images/home.svg" mode="aspectFit"></image></view>
        <view class="btn"></view>
    </view>
</template>

<style lang="scss">
    image {
        height: 100rpx;
        width: 100rpx;
    }
    .btn {
        height: 100rpx;
        width: 100rpx;
        background-image: url("~@/static/images/home.svg");
        background-size: contain;
    }
</style>

此时编译到微信小程序，在对应的 wxss 中可以看到 background-image: url("../../static/images/home.svg"); 仍然是以路径 url 形式存在，导致小程序中不显示该图标；

如果删去前文的 image 标签，或将 image 标签引用的内容换为其他图像：

<template>
    <view>
        <view><image src="~@/static/images/search.svg" mode="aspectFit"></image></view>
        <view class="btn"></view>
    </view>
</template>

<style lang="scss">
    image {
        height: 100rpx;
        width: 100rpx;
    }
    .btn {
        height: 100rpx;
        width: 100rpx;
        background-image: url("~@/static/images/home.svg");
        background-size: contain;
    }
</style>

此时编译到微信小程序，在对应的 wxss 中可以看到 background-image 的 url 正确编译到了 base64，可以在小程序中正确显示。

这个问题是否是 bug？

[bfc846958672]

你好，我这边正常编译base64 ，尝试升级最新uniapp版本

[LeopoldChou]

测试在最新版本下仍然出现此问题，HBuilderX 版本为 4.24，使用 Vue3 开发 uni-app，文件大小 2KB 未超过限制：

是否需要我提供项目源文件？

[bfc846958672]

发一下复现的demo工程，我排查一下

[LeopoldChou]

工程文件已打包，如下：

uni-app-tutorial.zip

将 /pages/02_style/02_style.scss 中的 .btn { background-image: url("~@/static/images/search.svg"); } 改为 home.svg 即可复现 （或：将 /pages/02_style/02_style.vue 中的 <image src="~@/static/images/home.svg" mode="aspectFit"></image> 改为 search.svg 同样可以复现）

[bfc846958672]

感谢反馈，已确认bug