uni-app h5端background-image的url()路径404，因css中url()为纯字符串，webpack默认不解析；仅url('/static/xxx')和url('~@/static/xxx')有效，且图片必须真实存于static目录。
uni-app H5端 background-image 中 url() 路径为什么总 404
因为 CSS 文件里的 url() 是纯字符串，webpack 默认不解析它——除非路径满足特定条件。你在 src/assets/ 下写 url('./assets/bg.png')，构建后浏览器会直接请求 /assets/bg.png，但这个路径根本没被 webpack 拷贝进输出目录，自然 404。
真正能被 H5 正确加载的，只有两类路径：
-
url('/static/bg.png')：以/static/开头，对应static/目录下的文件，会被原样拷贝到输出根目录，运行时直接可访问 -
url('~@/static/bg.png')：带~@/前缀，uni-app 构建系统识别后会转为相对或绝对路径（取决于publicPath配置），且确保资源参与构建流程
注意：@/ 别名在纯 CSS 里无效，~/ 在部分旧版 loader 中也不稳定，~@/ 是目前最可靠写法。
为什么 url('@/static/bg.png') 在 H5 里还是错
@/ 是 Vue CLI 对 src/ 的别名，只在 .vue 的 <script></script> 或 <template></template> 中由 vue-loader 处理；CSS 解析器不认识它，会原样输出字符串，导致请求路径变成类似 /@/static/bg.png 这种非法地址。
实操中要避免这些写法：
-
url('@/static/bg.png')→ 别名未生效，404 -
url('../static/bg.png')→ 相对路径依赖当前 CSS 文件位置，H5 打包后 CSS 可能被提取、重命名、挪动，路径关系断裂 -
url('./static/bg.png')→ 同上，且容易和组件内require()混淆，但url()不走模块系统
正确姿势只有一条：用 ~@/static/xxx，并确保图片真实存在于 static/ 目录下（不是 src/assets/）。
打包到二级路径（如 /c/）时 background-image 怎么写
如果你的 H5 部署在 https://example.com/c/，必须配置 vue.config.js 中的 publicPath: '/c/'，否则所有资源路径都会错位。
但仅配 publicPath 不够——url('~@/static/bg.png') 生成的路径是 /c/static/bg.png，这没问题；而 url('/static/bg.png') 会变成 /static/bg.png（漏掉 /c/），导致 404。
所以二级路径下必须统一用 ~@/ 写法，并确认：
-
static/目录在项目根目录（不是src/static） -
vue.config.js中publicPath和实际部署路径严格一致 - 检查浏览器 Network 面板，确认请求地址确实是
https://example.com/c/static/bg.png
小程序真机 vs H5 的背景图路径能否共用
不能直接共用。小程序真机不支持 url('/static/...') 这种写法（会尝试走网络请求），也不支持相对路径；但它支持 url('~@/static/...')，且 uni-app 编译时会自动把 static 下的图打包进小程序包。
所以跨平台最稳方案是：
- 所有背景图放
static/目录（不要放src/assets/） - CSS 中统一写
url('~@/static/xxx.png') - 避免动态拼接路径（如
:style="{ backgroundImage: 'url(' + imgUrl + ')' }"），这种写法在小程序里无法被编译识别，H5 里也容易漏掉~@/
真正容易被忽略的是：哪怕你写了 ~@/，如果图片不在 static/ 而在 src/assets/，uni-app 构建时根本不会把它复制进输出目录——H5 和小程序都会 404，只是报错表现不同而已。
