小程序base64图片显示问题（综合对比，实测有效,基于onenet平台）

项目背景

最近在做一个小程序和云服务器之间传递图片的功能。

基本流程如图所示，但是问题就在于，我在接受到了正确的base64格式的这一段代码后无法显示到小程序界面中

前期准备

不少人私信我，想问python端怎么上传，这次就把这一块发出来

import urllib.request
import json
import time
import datetime
import random
import requests
import base64

APIKEY = '@@@@@@@@@@@@@@'  # 改成你的APIKEY
apiurl = 'http://api.heclouds.com/devices/@@@@@@@/datapoints' #链接里面的@要改成自己的id
apiheaders = {'api-key': APIKEY, 'Content-Length': '120'}

def http_put(s):
    payload = {'datastreams': [{"id": "base", "datapoints": [{"value":s}]}]}
    # payload = {"datastreams": [{"id": "girlA", "datapoints": [{"value": 11}]}]}

    jdata = json.dumps(payload)  # 对数据进行JSON格式化编码
    # 打印json内容
    #print(jdata)
    r = requests.post(apiurl, headers=apiheaders, data=json.dumps(payload))
    return r

def trans(f):
    base64_data = base64.b64encode(f.read())
    s = base64_data.decode()
    #print('data:image/jpeg;base64,%s'%s)
    return s


if __name__ == '__main__':
    #time.sleep(2)
    f=open("C:/Users/lx/Pictures/Saved Pictures/girl.jpg", 'rb')
    s='data:image/jpeg;base64,'+trans(f)
    resp = http_put(s)
    print("OneNET请求结果:\n %s" % resp)

可以看到，我们是把图片转换成了base64格式，然后整个打包到一个jason字符串里面上传了。

在这里首先贴上我的node.js请求刚才上传的base64部分代码

getdata(){
    //var that=this;
    console.log(this.data.image)
    wx.request({
      url: 'http://api.heclouds.com/devices/你的设备id/datapoints?datastream_id=数据流的名字', //设备API地址
      data:{
      
      },
      header: {
       'content-type': 'application/json', // http头部
       //'content-type': 'application/x-www-form-urlencoded',
        "api-key": 'sBHLeW50Cy7DjOFpsrt=WSarjNE='
      },
      method:"GET",

      success:(res)=> {
        console.log("成功")
              //console.log(res.data.data.datastreams[0].datapoints[0].value)
        var temp = res.data.data.datastreams[0].datapoints[0].value
        this.setData({
          image: temp
        })//使用绑定

        console.log(this.data.image)

      },
    })
    //console.log(this.data.image)
    //this.data.image=res.data
  },

其中，我们要得到的，在云服务器上的base64格式数据如下：

（本项目用的是OneNET开放平台）
https://open.iot.10086.cn/
在做的过程中，为了能够检测每一步中这个base64图片是否格式正确，我用了这个网站，来检测数据在传输过程中是否能还原为图片显示出来
base64图片转代码

如图，显然我们在云端的数据是没问题的哈哈哈。

渲染和显示

首先，挂几个我在为了解决这个问题过程中搜到的答案。

• 第一个
  https://www.cnblogs.com/xyyt/p/10929742.html
  这个给了我一些启示，但是用他的方法并未成功，但各位不妨一试

• 第二个
  https://segmentfault.com/q/1010000011529278
  受到了他的启发，决定在通信中，直接把图片base64格式的代码以文本的形式传到云端，而不是直接传图片上去（因为onenet服务器你在请求一个图片的时候，是以二进制格式下载下来的，又牵扯到二进制文件转base64格式之后再显示，我尝试过，中途有很多问题，有时候二进制格式数据转成了base64之后，用上面那个网站没法转会成图片，就说明图片二进制数据在这一通操作中损坏了。）

• 第三个
  https://www.cnblogs.com/china-fanny/p/11213746.html
  值得一试，但是原理和第一条一样，我用的时候不行，但是给了一个bug出现的原因的思路微信小程序的渲染兼容性差宇H5

我的解决方案

<image  class="shili" src="{{image}}" style="background:url({{image}});-webkit-background-size:cover;"></image>

原理：
我把这个图片设置为背景background:url({{image}});-webkit-background-size:cover;
这样，就能够解决微信小程序渲染BUG的问题了
其中{{image}}是一个绑定变量，绑定了我在前面node.js里面请求、保存在data.image变量中，

显示效果如图：

总结

本文记录的自己在一个项目中一个很小的点的踩雷的过程，希望对大家有用，就算没用，我在里面列了几个别人的解决方法的链接，也能够减少诸君搜索查找的时间了。谢谢。