微信小程序rich-text组件image显示不了云端存储的图片,处理方法一:

这个方法的解决思路是: 将rich-text html中的img的src从云端存储的id转变为http形式的临时url.微信中提供了这个方法.wx.cloud.getTempFileURL.

这个方法的缺陷也是rich-text的缺陷是:这样转换的img不能预览,rich-text是一个封闭的容器,其中的image的事件js捕捉不到.因此预览方法不能使用.

具体的操作步骤:

//首先从云端数据库中读取数据    
db.collection(\'flowsDetail\').doc(options.id).get({
        success: function (res) {
          // res.data 包含该记录的数据
          var timestamp = Date.parse(new Date());
          let expiration = timestamp + 100000;
          wx.setStorage({
            key: \'flowDetail\'+options.id,
            data: res.data,
          })
          wx.setStorageSync("expiration_flowDetail" + options.id, expiration);
        
        //得到要存入rich-text中的message.
          var _message=res.data.message;
          var img_index= _message.indexOf("img")
          console.log(img_index);
         
      //如果message中有img
          if (img_index>-1){
          //找到云端的src
            var srcindex = _message.indexOf("cloud:");
            var pngindex=_message.indexOf(".png");
            var src = _message.substring(srcindex, pngindex+4);
            console.log(src);
         //使用wx提供的getTempFileURL的方法获取临时url
            wx.cloud.getTempFileURL({
              fileList: [src],
              success: res => {
                // 将原来message中的img的src 云端id转换为零时的fileId
               // console.log(res.fileList[0].tempFileURL);
                var  newMess = _message.replace(src, res.fileList[0].tempFileURL);
                //设置message
                _this.setData({ message: newMess});
              },
            })
          }else{
            console.log("没有img");
          }