微信小程序background-image不能直接指定本地图片

• 解决方法

微信小程序background-image不能直接指定本地图片

background-image: url("../../img/welcome.png");

使用本地图片指定背景的时候，系统会报错,如图所示

解决方法

如果出现这样的问题，我们有两种方法解决这个问题

方法一，使用base64编码

这种方法使用起来比较简单，但是图片的base64编码比较长，会很影响我们的代码结构，闹心

background-image: url("data:image/jpg;base64,");

可以直接采用这个网址进行转换：http://imgbase64.duoshitong.com/

方法二，使用image控件，设置src属性

我们使用第二种，这种需要用到CSS层叠样式

position:relative和position:absolute设置对象属性为可定位（可重叠）

<!--index.wxml-->
<view class="relative">
  <image class="pic_background" src="../../img/pic_background.png"></image>
  <view class="container">
    .....
  </view>
</view>

.relative{
  height: 100%;
  width:100%;
  position:relative;
}
.pic_background{
  height: 100%;
  width:100%;
  position:absolute;
}
.container {
  height: 100%;
  width:100%;
  flex-direction: column;
  color:#222222;
  font-size: 30rpx;
  position: absolute;
  font-weight:900;
  font-family: "幼圆","方正姚体",Geneva,"Times New Roman";
}