Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
LeopoldChou opened this issue Aug 15, 2024 · 5 comments
Open

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

LeopoldChou opened this issue Aug 15, 2024 · 5 comments
Assignees
Labels
bug Something isn't working mp mini program

Comments

@LeopoldChou
Copy link

LeopoldChou commented Aug 15, 2024

教程文档中写到:

“为方便开发者,在背景图片小于 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 bfc846958672 self-assigned this Aug 16, 2024
@bfc846958672 bfc846958672 added bug Something isn't working mp mini program and removed bug Something isn't working labels Aug 16, 2024
@bfc846958672
Copy link
Contributor

bfc846958672 commented Aug 16, 2024

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

@LeopoldChou
Copy link
Author

LeopoldChou commented Aug 16, 2024

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

截屏2024-08-16 下午2 42 59 截屏2024-08-16 下午2 44 04

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

@bfc846958672
Copy link
Contributor

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

@LeopoldChou
Copy link
Author

LeopoldChou commented Aug 16, 2024

工程文件已打包,如下:

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 bfc846958672 added bug Something isn't working and removed 无后续反馈将自动关闭 autoclouse labels Aug 16, 2024
@bfc846958672
Copy link
Contributor

感谢反馈,已确认bug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working mp mini program
Projects
None yet
Development

No branches or pull requests

2 participants