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

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

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

具体的操作步骤:

 1 //首先从云端数据库中读取数据    
 2 db.collection('flowsDetail').doc(options.id).get({
 3         success: function (res) {
 4           // res.data 包含该记录的数据
 5           var timestamp = Date.parse(new Date());
 6           let expiration = timestamp + 100000;
 7           wx.setStorage({
 8             key: 'flowDetail'+options.id,
 9             data: res.data,
10           })
11           wx.setStorageSync("expiration_flowDetail" + options.id, expiration);
12         
13         //得到要存入rich-text中的message.
14           var _message=res.data.message;
15           var img_index= _message.indexOf("img")
16           console.log(img_index);
17          
18       //如果message中有img
19           if (img_index>-1){
20           //找到云端的src
21             var srcindex = _message.indexOf("cloud:");
22             var pngindex=_message.indexOf(".png");
23             var src = _message.substring(srcindex, pngindex+4);
24             console.log(src);
25          //使用wx提供的getTempFileURL的方法获取临时url
26             wx.cloud.getTempFileURL({
27               fileList: [src],
28               success: res => {
29                 // 将原来message中的img的src 云端id转换为零时的fileId
30                // console.log(res.fileList[0].tempFileURL);
31                 var  newMess = _message.replace(src, res.fileList[0].tempFileURL);
32                 //设置message
33                 _this.setData({ message: newMess});
34               },
35             })
36           }else{
37             console.log("没有img");
38           }