有这样的场景: 对于只是公司官网的小程序，单独搭建一个后台管理系统确实不值得，使用小程序提供的云存储和云数据库就完全够用了，企业动态和公司新闻这些信息可能是需要定期更新的，内容中可能涉及到文本和图片的混排，一般会采用rich-text渲染，如果把这个图片存储在云存储中，该怎么显示呢?
rich-text中如何渲染云存储中的图片?
首先，先把图片上传到云存储中:
每张图片会生成一个FileID，以后所有图片的操作都是通过这个FileID进行的。
其次，编辑文章的内容，其中会包含一个上面的图片，编辑好的内容你可以存储在云数据库中:
世上有朵美丽的花，那是青春吐芳华。2019年5月26中午，一年一度的汇报演出在北京星光影视基地打开帷幕。 丽质舞蹈全体成人学员早早换好了演出服装，化好了妆，等候在演出大厅。尽管外面大雨滂沱，乌云密布，依然阻挡不住学员们一颗爱舞的心。 <img src="cloud://xxxxxxx.7a75-zuo-demo-669fb7-1258561142/news01.jpeg"/>回想过往，并不是舞蹈专业出身的她们，为了心中的舞台，为了不悔的芳华。三个多月以来，不仅没有落过一节课，甚至每节课都提早来，最后走。因为她们知道上舞台就要呈现最完美的自己。 虽然不是专业演员，但她们对美的追求丝毫不减，如果觉得自己动作做得不到位，她们不计年龄差距， 面对比自己年龄小的老师仍然是不耻下问，直到把动作做到标准。 许多演员都是利用业余时间学舞，白天她们要面对各种工作压力，晚上她们仍然孟坚持不懈地来丽质舞蹈追求自己的舞台梦想，这种执着的精神，无愧芳华。 这也许就是热爱，丽质舞蹈创办近十年来，吸纳了越来越多的舞蹈爱好者，单说今年，就有近百人的成人舞蹈阵容，真是不可小觑啊。 世上有朵英雄的花，那是青春放光华。舞台上的她们，用美丽动人的舞蹈证明着自己的青春，记录着自己的芳华。妖娆的维吾尔族舞，清新淡雅的折扇舞，娇俏可爱的团扇舞，落落大方的朝鲜舞，更有异域风情的印度舞，肚皮舞，拉丁舞和唯美的芭蕾舞，还有，让青春扑面而来的爵士舞。 排练，演出看似简单的过程，却凝结了舞蹈演员们无私的付出和辛苦地磨练。且不说平时训练中会时常出现的小伤，就是在演出的时间上，许多演员也是克服了各种困难，才保证到演出的完美效果。没有付出，哪来收获。 芳华不易逝，只做有心人。在丽质舞蹈2019年汇报演出的舞台上，无论年轻还是年老，无论舞蹈基础强或弱，我们看到的都是她们最美丽的一面，星光熠熠，芳华绽放，美得无法形容！ |
图片的位置是一个html脚本<img src="cloud://zuo-demo-669fb7.7a75-zuo-demo-669fb7-1258561142/news01.jpeg"/>，src是上面的FileID。
之后，在小程序端获得上面的内容后，替换其中的src值,:
turnImageUrl:function(content){ var that = this; var index = content.indexOf("cloud:", index); if (index == -1) return ; var endIndex = content.indexOf("\"", index); var src = content.substring(index, endIndex); index = endIndex; wx.cloud.getTempFileURL({ fileList: [{ fileID: src }] }).then(res => { content = content.replace(src, res.fileList[0].tempFileURL); that.setData({ content: content }); that.turnImageUrl(content); }).catch(error => { }) } |
小程序端提供了一个wx.cloud.getTempFileURL()的方法，可以将图片的FileID转换为一个真实的http地址。这样，就可以将<img>中的FileID转换为图片地址了。
说实话，上面我写的turnImageUrl方法，效率比较低，没替换一张图片就渲染一次，如果你有更好的方法可以留言交流哦。
购买源码: http://market.zhenzikj.com/detail/96.html
