uni-app 百度小程序中公共css设置background-image报404

uni-app 百度小程序中公共css设置background-image报404

示例代码：

/* /static/common.scss */
.icon-right{  
    background-image: url(@/static/icon/icon-right.png);  
    /* #ifndef APP-PLUS-NVUE */  
    background-size: 100% 100%;  
    background-repeat: no-repeat;  
    display: inline-block;  
    /* #endif */  
    width: 10px;  
    height: 10px;  
}

<style lang="scss">  
    /*每个页面公共css */  
    @import "@/static/common.scss";  
</style>

操作步骤：

  • 运行至百度开发者工具或发行至百度开发者工具

预期结果：

  • 能正确读取路径

实际结果：

  • 无法正确读取路径

bug描述：

百度小程序中公共css设置background-image报404 目前是组件、页面中支持，公共css不支持

信息类别 信息内容
产品分类 uniapp/小程序/百度
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows10
HBuilderX类型 正式
HBuilderX版本号 3.2.15
第三方开发者工具版本号 3.44.1
基础库版本号 3.290.31
项目创建方式 HBuilderX

更多关于uni-app 百度小程序中公共css设置background-image报404的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 百度小程序中公共css设置background-image报404的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在百度小程序中，公共CSS文件通过@import引入时，background-image的路径解析确实存在兼容性问题。这是因为百度小程序对CSS中相对路径的解析规则与uni-app的编译处理方式不一致。

解决方案：

  1. 使用绝对路径（推荐） 将路径改为绝对路径，从项目根目录开始：

    background-image: url('/static/icon/icon-right.png');

  2. 使用base64编码 如果图片较小，可以转换为base64格式直接嵌入CSS：

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==');

  3. 避免在公共CSS中使用背景图片 将背景图片样式直接写在页面或组件中，而不是公共CSS文件。

  4. 使用条件编译 针对百度小程序单独处理：

    /* #ifdef MP-BAIDU */
background-image: url('/static/icon/icon-right.png');
/* #endif */
/* #ifndef MP-BAIDU */
background-image: url(@/static/icon/icon-right.png);
/* #endif */
回到顶部