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

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

  • 原因:小程序背景图片只可以展示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
        });
      },
    })
微信图片_20181214163241.jpg
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容