颖想家

在web开发或者webapp开发中我们习惯了直接通过css引用本地图片做背景，例如：

.aaa {

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

}

但是这种引用方式在微信小程序中是无法使用的，控制台会显示  url(/static/images/down.png-do-not-use-local-path-./pages/course/course.wxss&66&16) right center 提示不允许使用本地路径的图片。

解决的方法是使用远程图片。css代码如下：

.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,iVBORw0KGgoAAAANSUhEUgAA... no-repeat;

  background-size: contain;

  display: inline-block;

  width: 40rpx;

  height: 40rpx;

}

这样就是把图片转换成了一串base64编码来调用。而编码转换网址，如下：

http://imgbase64.duoshitong.com/

转换出的代码直接复制到url的括号中即可。

在微信开发者工具中能显示背景图，但手机上不显示的问题。

<navigator url='' style='background:url(../../images/bj.png) right center no-repeat;'></navigator>

这样写，在微信开发者工具上可以显示出背景图，但是在真机上却不显示。而使用服务器地址的

<navigator url='' style='background:url(http://m.xxxwang.cn/Application/Home/Public/wap/img/fh.png) right center no-repeat;'></navigator>

开发工具和真机均可显示。

如果没有服务器，用网址形式添加背景图片，可这样操作：图片上传QQ空间--在空间相册打开，鼠标右键，保存网址（网上看到有网友这么推荐，未测试）。

总结

在微信小程序开发中，最好不要用backgroun-image这个属性来展示本地图片。图片放在别的服务器上，随时都有被删掉而导致背景图不能正常显示的风险。最好是直接用image标签来显示本地图片。