微信小程序不能使用本地图片当背景图片的解决方法

• 本来直接用的本地图片，但结果真机调试的时候无法显示，上网查了之后知道小程序图片只能加载网络上的（直接写链接），或者是base64转码后的

style="background-image:url(../../../images/back-login.png)"

• 所以我就去搜怎么转码，终于转好了，如下,
  但我真机调试的时候发现会先加载内容再加载背景图，所以会有一小段时间无背景图，再加载出来，我觉得效果难看

//wxml
<view class="container" style="background-image:url({{img}})"></view>

//js
data:{
    // 相对路径的本地背景图片
    bgImage:'images/back-login.png',
    // 转换后的图片地址
    img:'',
}
onLoad: function (options) {
 this.setData({
    img: 'data:images/back-login.png;base64,'+     wx.getFileSystemManager().readFileSync(this.data.bgImage, "base64")  
},

• 所以就想着直接在url里写入base64码，这样虽然代码冗长一点，但可以正常加载，如下，结果打包的时候说代码内存太大，我上网查了下，base64的所占内存要比原图片的内存多30%左右，这样太耗内存了
  附：转码网址： http://tool.chinaz.com/tools/imgtobase

• 解决方法1：使用image组件，这个src就可以引用本地图片

//wxml
<image src="../../../images/back-login.png"></image>

//wxss 
/* 背景图 */
image{
  position: absolute;
  width:750rpx;
  height:1334rpx;
  z-index:-1; // 设置z-index层级，将image标签置于底层
}

• 解决方法2：还是把图片放在服务器里，直接用链接引用吧
  朋友是开了cos服务存的，我是直接放在了后台的服务器上

本文地址：https://blog.csdn.net/MR_BC/article/details/112548122