解决小程序中本地资源图片无法通过wxss获取的问题

第一种：使用网络图片，即使用根路径

<!--index.wxml-->
<view class="container">
  <view class="content">~hello~world~</view>
</view>

/**index.wxss**/
.content{
          
   
  width: 100vw;
  height: 100vh;
  text-align: center;
  color: #fff;
  background: url(http://localhost:8080/images/banner.jpg) no-repeat;
  background-size: cover;
}

第二种，使用image标签

内容在前，image标签在后

<!--index.wxml-->
<view class="content">~hello~world~</view>
<image src="../../images/banner.jpg"></image>

/**index.wxss**/
image{
          
   
  width: 100vw;
  height: 100vh;
}
.content{
          
   
  text-align: center;
  color: #fff;
  width: 100vw;
  height: 100vh;
  position: fixed;
}

image标签在前，内容在后

<!--index.wxml-->
<image src="../../images/banner.jpg"></image>
<view class="content">~hello~world~</view>

/**app.wxss**/
page{
          
   
  display: flex;
}

/**index.wxss**/
image{
          
   
  width: 100vw;
  height: 100vh;
}
.content{
          
   
  width: 100vw;
  height: 100vh;
  position: fixed;
  text-align: center;
  color: #fff;
}

第三种，使用base64编码图片（不推荐）

<!--index.wxml-->
<view class="container">
  <view class="content">~hello~world~</view>
</view>

为啥不推荐，看看url里的编码有多长就知道了，哈哈哈。