• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

这个方法的解决思路是: 将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           }                                        

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序canves绘制网络图片不显示问题发布时间:2022-07-18
下一篇:
uniapp微信小程序canvas绘图插入网络图片不显示发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap