如果后台返回的是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%
然后图片就可以适应手机屏幕宽度了
当然,这样只能处理最外层的图片,如果是放在其它标签内部的图片就需要递归处理了