- 本来直接用的本地图片,但结果真机调试的时候无法显示,上网查了之后知道小程序图片只能加载网络上的(直接写链接),或者是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服务存的,我是直接放在了后台的服务器上