小程序加载background-image背景图片

问题描述 

 当开发小程序的时候，如果想在css里面加载 background-image 背景图，会报错

.radio_bkg_on {
  background-image: url(../../img/tick_blue.png);
  background-repeat: no-repeat;
  background-size:14px 11px;
  padding-left:0.7em;
}

 

 错误原因

 报错原因很明确： 微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片。

 

解决方法

1. base64图片设置步骤如下：

1.1 在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本

1.2 在WXSS中使用以上文本：background-image: url(“data:image/png;base64,iVBORw0KGgo=…”);

 

2.使用线上图片