小程序 设置背景图

在wxss文件中，使用background-image: url();设置背景图，报错，提示
pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签
小程序中设置区域背景图，对于在wxss文件中，存在本地资源无法获取的问题。解决方案在错误提示中也给出来了

1、网络图片

使用背景图片的时候，采用网络图片

background-image: url(https://xxx/xxx.pmg);

---

2、base64

base64编码，在这个网站进行转换，转换之后的得到的字符串放入url中。格式：

background-image: url(转换之后的base64字符串);

多次使用的话，可以设置全局变量，在js文件中进行引用

---

3、<image/>标签

利用流布局，设置z-index层级，将<image/>标签置于底层

具体代码如下：

.wxss文件

---

/* 头部 */
.header-container {
  display: flex;
  flex-direction: row;
  height: 200rpx;
  background-color: #fff;
  align-items: center;
  position: relative;
  background-image: url(../../image/me/myinfo_bg.png);
}

.header-bg{
  width: 100%;
  height: 100%;
}

/* 名称和头像 */
.userContent{
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}

.header-avatar {
  background-color: #fff;
  width: 90rpx;
  height: 90rpx;
  margin: 0 20rpx;
  border-radius: 50%;
}

.header-nickname {
  color: #fff;
  font-size: 30rpx;
}

/* 帐号管理和信息 */
.header-userInfo{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 120rpx;
  margin-left: auto;/*靠右*/
}

---

.wxml 文件

---

   <view class="header-container">
      <image class='header-bg' src = '../../image/me/myinfo_bg.png'></image>
      <view class='userContent'>
        <image bindtap='changePhotoImg' class="header-avatar" src="{{userInfo.headUrl}}" ></image>
        <text class="header-nickname">姓名</text>
        <view class='header-userInfo'>
          <image></image>
          <text class='header-centertext'>帐号管理 ></text>
        </view>
      </view>
    </view>

效果图