关于微信background-image在真机展示不出来的解决方案
发布于 5 年前 作者 zhumin 7310 次浏览 来自 问答

假设文件目录结构为如下形式,我们需要在index这个page中引用main_bg.png这个文件

平时我们的做法都是在wxss中或者元素的style中指定background-image: url("/images/main_bg.png")

但是这种做法在开发工具上可以展示,在真机上却展示不出来,这个应该是个bug。

解决方案如下:

只能在wxml中的style中指定background-image,并且url中最前面的/需要去掉。(在wxss中指定无效,加上’/'也会无效)

但是这个方案在开发工具中无法正常预览,所以大家可以先通过在wxml中指定background-image: url(’/images/main_bg.png’),待开发完成要在真机预览时,再把最前面的’/'去掉即可

当然最好是希望微信团队能够早点解决这个小bug

4 回复

貌似只在部分手机上有效

赞,请测有用。虽然把前面的 斜线去掉后会报错。但是能用。

我们现在都尽量不用背景图,如果有需要直接用CDN上的地址,或者小图的话干脆base64处理,虽然会大一点。

  • -好多坑呀
回到顶部