uni-app富文本rich-text图片溢出的问题处理方法

如果后台返回的是html字符串，我们需要使用rich-text标签来进行解析，但是rich-text无法控制内容的样式，如果里面有较大的图片，显示在手机端就会出现图片大小溢出屏幕的问题。

这时我们可以使用官方推荐的html-parser插件对html字符串进行解析

html-parser下载地址：https://github.com/dcloudio/hello-uniapp/blob/master/common/html-parser.js

import richParse from '../../static/js/richParse.js'

var text = richParse.parseHtml(‘...你的html文本’)

以上图中这张图片为例：

<img src="https://zhongbang.xingyuncm.top/static/upload/images/goods/2019/01/14/1547452505349986.jpg" alt="1547452505349986.jpg"/>

解析之后的结果

解析之后成为数组形式

然后遍历数组，如果name是img，则添加属性style，width：100%

然后图片就可以适应手机屏幕宽度了

当然，这样只能处理最外层的图片，如果是放在其它标签内部的图片就需要递归处理了