微信小程序：背景图片电脑开发时可以显示，手机测试时无法显示

最新推荐文章于 2024-08-31 16:39:54 发布

Dove言和

最新推荐文章于 2024-08-31 16:39:54 发布

阅读量3.8k

点赞数 4

分类专栏：微信小程序实战全记录文章标签：微信小程序背景图片

微信小程序实战全记录专栏收录该内容

93 篇文章 157 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

微信小程序中，背景图片在开发编辑器中正常显示，但在手机预览时消失。原因是小程序不支持本地路径的背景图片。解决办法是通过`wx.getFileSystemManager().readFileSync()`将本地图片转为base64或网络地址。参考自CSDN博主的文章。

摘要由CSDN通过智能技术生成

背景图片在编辑器中可以展示，但是手机预览时无法显示。

原因：小程序背景图片只可以展示base64或者网络地址图片，背景图片如果使用本地路径地址，电脑开发时可以正常显示，手机测试时无法显示背景图。
解决方法：使用"wx.getFileSystemManager().readFileSync(file_address,encoding)"进行转码（感谢地址的博主：https://blog.csdn.net/qq_36875339/article/details/81086205）

<!-- index.wxml -->
<view class='container'>
  <!-- 主体内容 -->
  <view class="body_level" style="background:url({{background}});">
    <view class="logo_robot" >
      <image src='{{logo_robot}}'></image>
    </view>
  </view>
</view>

//index.js
Page({
      data: {
        "background" : "/images/mipmap-hdpi/backgr.png",  //背景图片
        "logo_robot": "../../../images/mipmap-hdpi/logo-robot.png",
      },
      onLoad: function () {
        var that = this;
        let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64');
        that.setData({
          'background': 'data:image/jpg;base64,' + base64
        });
      },
    })

作者：韩小禹
链接：https://www.jianshu.com/p/18aaac940df2
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。