微信小程序图片使用示例

小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

##1：加载本地文件夹图片

     <image  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/image/pig.jpg" mode="aspectFill">  
     </image>  

##2:加载服务器图片

wxml:

    <image  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{imageUrl}}" mode="aspectFill">  
    </image>  

js:

Page({
  data: {
    imageUrl: "http://www.intmote.com/timg.jpg",
    
  },

或者直接在wxml写代码：

    <image  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.intmote.com/timg.jpg" mode="aspectFill">  
    </image>  

###3：给小程序页面加载一张背景图片
方法一：
使用背景图片的时候用网络图片，就是用外链的形式，比如你将这张图片放到你的服务器，如：https://xxxx/xxx.jpg；

方法二：
将背景图片使用编码base64进行转换，可以在这个网址进行http://tool.css-js.com/base64.html 转换，如：background-image: url(“转换后得到的编码文本”)，如果多次使用的话可以将该值设置为全局变量，再在js文件进行引用即可；

详见上一篇博客：https://www.jianshu.com/p/61e6e7390f4a