微信小程序wxss的background本地圖片問題

在web 或者webapp開發中我們習慣了直接飲用本地圖片做背景，例如

.aaa {
  background: url('img/1.png');
}

但是這種引用方式在微信小程序中是無法使用的，控制台會顯示如下

不允許使用本地路徑。

於是我將路徑替換為非本地路徑試試：

.u-img-leftIcon {
  background: url('http://192.168.31.163:8020/pr/source/img/searchLeft.png') no-repeat;
  background-size: contain;
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
}

此時，圖片正產顯示。但是開發的時候如果沒有圖片服務器咋辦？

可以使用base64方式引用圖片

.u-img-leftIcon {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAAHlJREFUWAnt2LEJwDAMRFE5c2ShLOKhsp69h3ISeAI1CnyBiJvA8dwcHu7+mNmrvbWdZivMHAq4dOgW7kDt65y6fiPg1AZnt8kr7haKPAgggAACfxOIskCbKdwabaaAlw0rmhaDAAIIIIBAQYA2U8CLX2kzFcB8m/kAgGUmQShl8pcAAAAASUVORK5CYII=) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
}

這樣就是把圖片轉換成了一串base64編碼來調用。而編碼轉換網址，如下：
http://imgbase64.duoshitong.com/

轉換出的代碼直接復制到url的括號中即可