uni-app怎么解决小程序端背景图路径报错 uni-app图片转base64方法【避坑】-uni-app-PHP中文网

小程序中background-image仅支持/static/绝对路径、线上url或base64；需用uni.getfilesystemmanager().readfile读取/static下图片转base64，h5与小程序须条件编译，且必须通过:style绑定内联样式。

uni-app怎么解决小程序端背景图路径报错 uni-app图片转base64方法【避坑】

小程序端 background-image 路径报错：必须用绝对路径且不能是本地相对路径

uni-app 在小程序平台（尤其是微信）里，background-image 的 URL 不能写 ./assets/bg.png 这类相对路径，编译后会变成无效地址或直接 404。这是因为小程序的 WXML/CSS 不支持运行时解析相对路径，且不走 webpack 的资源处理流程。

真正能生效的只有三类路径：

/static/bg.png（以 /static 开头的绝对路径，文件必须放在项目根目录的 static 文件夹下）
https://xxx.com/bg.png（线上 CDN 地址）
data:image/png;base64,...（base64 字符串，绕过路径限制）

注意：/assets 目录在小程序中不会被自动拷贝到构建产物里，只有 /static 是 uni-app 明确约定的静态资源目录，会被原样复制到小程序根目录。

uni-app 中图片转 base64：别用 require()，改用 uni.getFileSystemManager().readFile()

很多人习惯在 H5 端用 require('./xxx.png') 得到 base64，但这在小程序端会报错 —— require is not defined。因为小程序不支持 CommonJS 动态引入，且 require 只在编译期起作用，无法用于运行时路径拼接。

正确做法是用 uni 提供的跨端 API 读取本地文件（仅限 /static 下的图）：

const fs = uni.getFileSystemManager();
fs.readFile({
  filePath: '/static/bg.png',
  encoding: 'base64',
  success: (res) => {
    this.bgStyle = `background-image: url(data:image/png;base64,${res.data});`;
  }
});

关键点：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

路径必须是 /static/xxx 开头的绝对路径
只支持同步读取（readFileSync）或异步回调，不能 await（除非封装 Promise）
微信小程序要求图片小于 10MB；支付宝等平台可能更严，超限会报 fail file size too large

uni-app 条件编译写法：H5 用 require，小程序用 readFile

同一张背景图，在 H5 可以直接 require 编译成 base64，小程序却必须运行时读取 —— 这时候靠条件编译最稳妥，而不是试图写“通用”逻辑。

示例（Vue 单文件组件 setup 中）：

// #ifdef H5
const bgBase64 = require('@/static/bg.png');
this.bgStyle = `background-image: url(${bgBase64});`;
// #endif

// #ifdef MP-WEIXIN || MP-ALIPAY
const fs = uni.getFileSystemManager();
fs.readFile({
  filePath: '/static/bg.png',
  encoding: 'base64',
  success: (res) => {
    this.bgStyle = `background-image: url(data:image/png;base64,${res.data});`;
  }
});
// #endif

注意：