uni-app 中 view 的 background-image 不生效主要因路径错误或协议不支持：H5 支持相对/绝对路径、base64、网络图；小程序和 App 仅支持 /static/ 下绝对路径，不支持网络图及别名 @；推荐 class 写法，动态绑定需确保路径合法；跨端慎用 background-repeat、background-origin 等属性；交互需求强烈时建议改用 image 组件。
uni-app 中 view 的 background-image 不生效？先看路径和协议
uni-app 的 background-image 在 view 上不显示，八成是路径写错了，或者用了不支持的协议。H5 和小程序对背景图路径规则完全不同，不能直接套用 Web 写法。
- H5 端支持相对路径（如
./assets/bg.png）、绝对路径（/static/bg.png），也支持 base64 或网络地址（需配置downloadFile白名单） - 微信小程序只认
/static/下的本地资源，且必须是绝对路径（/static/bg.png），不能用./或../ - App 端（iOS/Android）同样只认
/static/目录，且不支持网络图作为 background-image（会静默失败） - 千万别在样式里写
background-image: url('@/assets/bg.png')——@是 webpack 别名，CSS 里不识别，编译后路径为空
用内联 style 还是 class？uni-app 的 background-image 渲染时机很关键
class 里写 background-image 最稳妥；用 :style 动态绑定时，容易因路径未及时解析或变量为 null 导致样式丢失，尤其在条件渲染或列表中。
- 推荐写法：
<view class="bg-view"></view>
+ CSS 中定义.bg-view { background-image: url(/static/bg.png); } - 如果必须动态换图，确保变量是完整合法路径（如
this.bgUrl = '/static/bg-active.png'），不要拼字符串：url(${this.bgUrl})容易漏引号或转义 - 小程序真机调试时，
background-image不触发重绘 —— 换图后需配合background-size或opacity微调才能强制刷新
uni-app 背景图拉伸、平铺、居中——这些 CSS 属性在各端表现不一致
不是所有 CSS background 相关属性都能跨端对齐。比如 background-origin 在小程序里完全无效，background-clip 多数端不支持。
- 安全可用的组合：
background-image+background-size: 100% 100%（拉满）或cover/contain（注意：小程序中cover行为和 H5 有细微差异，建议实测） - 平铺要用
background-repeat: repeat，但仅限 H5 和 App；微信小程序不支持平铺，设了也当没设 - 居中统一用
background-position: center，没问题；但避免写background-position: 50% 50%，某些旧版 App 端解析异常 - 别依赖
background-attachment: fixed—— 小程序和 App 都不支持视差滚动背景
替代方案：什么时候该放弃 background-image，改用 image 组件
当你要做点击响应、添加过渡动画、或需要精确控制加载状态（比如 loading 占位、错误 fallback）时，background-image 就力不从心了。
-
image组件支持@error、@load、mode（如aspectFill）、lazy-load，语义和能力都更完整 - 结构上用
position: absolute把image压在view底层，比 hack background 更可控 - 注意 z-index：在 H5 端
image默认是 inline 元素，要加display: block才能正确叠层 - 如果只是纯装饰性背景，且不需要交互，坚持用
background-image更轻量；别为了“统一”强行组件化
