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

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

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

微信支付服务商，![CDATA[sub_mch_id与sub_appid不匹配],微信小程序支付，签名错误，CDATA[签名错误]解决方法，支付签名验证失败
微信支付服务商,微信小程序支付,签名错误,CDATA[签名错误]解决方法 1:服务商和普通的商户支付在代码上没有太大差异(不同的是上传的参数,而且微信支付服务商参数上比较难找,官方文档又太简洁,所以很 ...
微信小程序JSjavascript中的Math.pow()函数负数开立方解决方法
微信小程序JSjavascript中的Math.pow()函数负数开立方解决方法 Math.pow()函数是不能负数开立方的,会返回Null,因为对于计算机而言,负数开三次方是一个复数(实际上负数开三 ...
微信小程序手机号解密报错：pad block corrupted 解决方法
微信小程序手机号解密报错:pad block corrupted 解决方法微信小程序获取用户手机号,后端解密手机号的时候偶尔会报错 javax.crypto.BadPaddingException: ...
微信小程序通过background或者background-image设置背景图片
微信小程序设置北京图片目前只支持两种 1.在线图片 2.base64图片所以其一你如果有自己的服务器可以将图片放到自己的web服务器上: 其二将背景图片进行base64转换后来使用,在线转网站htt ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序出现【需要进行身份验证】弹框解决方法
2019独角兽企业重金招聘Python工程师标准>>> 问题在做微信小程序时,需要使用 Authorization 进行授权,结果每次登录的时候都出现这个弹窗. 原因部分代码如下 ...
微信小程序音频或视频拖动进度条时间不变解决方法
问题描述: 微信小程序在较新版本的音频接口中推荐使用InnerAudioContext对象实现音频的播放.暂停.跳转等功能,通过监听接口回调实现. InnerAudioContext.onTimeUp ...
微信小程序解密encryptedData报错：pad block corrupted 解决方法
今天碰到一个pad block corrupted错误,跟代码发现是Cipher里面的doFinal()爆出的错. 代码: public static JSONObject getUserInfo(S ...
微信小程序page页面下有多余空白区域（解决方法）
出现的问题是这样子的: 仔细检查,是因为自定义组件导致的问题,但是组件中对高度没有定义,应该是自适应的. 解决方法: 在使用自定义组件的外面套上一层层view,然后给它设置高度并设置超出部分隐藏即可. ...
微信小程序- wx.showToast()一闪，停留时间过短(解决方法)
使用计时器setTimeout来让提示语停留时间长些 setTimeout(() => {wx.showToast({title: res.data.msg,icon: "error& ...

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

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

最新文章

热门文章