微信小程序设置背景图片不显示问题解决方法

最近开发小程序的过程中遇到了这样一个小问题，在wxss文件中通过background设置背景图片，要实现背景图片上显示文字的效果，发现背景图片不显示，设置背景图片的代码如下：

.test {
    width:100rpx;
    height:30rpx;
    background:url('../../img/image.png') no-repeat;
    background-size: 100% 100%;
}

经查询，发现微信小程序中，将网络图片或base64图片设置为背景图片可正常显示，将本地图片设置为背景图片则不能显示，解决方法有三种，个人采用的是第三种方法。

1. 本地图片转换为base64格式

   在线转换地址传送门

   .test {
     background:url(data:image/png;base64,VCdweSsd98iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAAHlJREFUWAnt2LEJwDAMRFE5c2ShLOKhsp69h3ISeAI1CnyBiJvA8dwcHu7+mNmrvbWdZivMHAq4dOgW7kDt65y6fiPg1AZnt8kr7haKPAgggAACfxOIskCbKdwabaaAlw0rmhaDAAIIIIBAQYA2U8CLX2kzFcB8m) no-repeat;
     width: 100rpx;
     height: 30rpx;
     background-size: 100% 100%;
   }
   

2. 使用行内样式

   <view class="test" style="background:url('../../img/image.png')">
       <text>文字内容</text>
   </view>
   

   行内样式经验证，存在模拟器正常显示，真机无法正常显示的问题

3. image替换背景图片，定位实现背景图片效果

   <view class="test">
      <image src="../../img/image.png"></image>
      <text>文字内容</text>
   </view>
   

   .test{
       width:100rpx;
       height:30rpx;
       position:relative;
   }
   .test image{
       width:100%;
       height:100%;
   }
   .test text{
       width:100%;
       height:100%;
       line-height:100%;
       text-align:center;
       position: absolute;
       top:0;
       left:0;
       font-family:"PingFangSC-Semibold";
       color:#fff;
       font-size:18rpx;
   }
   

   最终图片放在另外一个H5项目中，可通过网络地址访问，以网络图片的形式访问，解决了背景图片显示的问题。