收藏
回答

关于微信background-image在真机展示不出来的解决方案

假设文件目录结构为如下形式,我们需要在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



回答关注问题邀请回答
收藏

49 个回答

  • 赵健棋
    赵健棋
    2021-09-26

    我说为什么真机测试的时候没有图片,原来罪魁祸首在这里。试了一下,果然是这么回事,要么模拟器能加载出来,要么手机能加载出来。(这都快2021年10月了,这个问题咋还存在。。。。)

    2021-09-26
    有用
    回复
  • 🤡 Carlos White
    🤡 Carlos White
    2021-07-05

    2021年7月,还有这个bug

    2021-07-05
    有用
    回复
  • ~
    2021-05-24

    这个时间点依然有这个问题,我是windows开发工具内用的/static/xxx.png的路径,预览在手机是不显示的,变成static/xxx.png可以手机正常预览,就是工具内报错😶

    2021-05-24
    有用
    回复
  • 姜云召Johnny
    姜云召Johnny
    2021-04-14

    至今仍存在

    2021-04-14
    有用
    回复
  • momo
    momo
    2021-02-02

    这个bug依旧存在

    2021-02-02
    有用
    回复
  • 郭志超🙂 🙂 😉 😉 🙂
    郭志超🙂 🙂 😉 😉 🙂
    2017-02-13

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

    2017-02-13
    有用
    回复
  • 🐳くも064
    🐳くも064
    2017-01-08

    貌似只在部分手机上有效

    2017-01-08
    有用
    回复
  • Jc
    Jc
    2017-01-08

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

    2017-01-08
    有用
    回复 1
    • ~
      2021-05-24
      背景图可以方便做纵横比,比如1:1,3:2这样的
      2021-05-24
      回复
  • Kevin.H
    Kevin.H
    2017-01-08

    - -好多坑呀

    2017-01-08
    有用
    回复

正在加载...

登录 后发表内容