微信小程序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");
          }