小程序富文本图片自适应

1. 从接口里获取到的文本:

<img alt="" src="http://地址.jpg" height="237" width="550" style="height:auto;" /> 

2. 尝试了很多种修改图片样式的方法:

this.nodes= htmlString .replace(/<img/gi, '<img width="80%!important" ')
//this.nodes= htmlString .replace(/<img/gi, '<img style="max-width:100%!important;height:auto;display:block" ')

3. 正则替换后的文本:

<img width="80%!important"  alt="" src="http://地址.jpg" height="237" width="550" style="height:auto;" /> 

4. 不生效,好气~

5. 翻官方文档发现:
   

   nodes 不推荐使用 String 类型，性能会有所下降

6. 哎, 好吧 好气~

7. 将 HTML String 转成 节点列表

8. 安装 npm install mini-html-parser2 --save

9. 引用 import parse from 'mini-html-parser2';

10. 调用:

    const content = htmlString.replace(/<img/gi, '<img width="80%!important" ')
    	// htmlString是从接口里得到的富文本内容
    parse(content, (err, nodes) => {
    	if (!err) {
    		this.nodes = nodes
    	}
    })
    

11. ok 大功告成,开心

12. 教训: 一出bug只想着搜答案,多看看官方文档,OK?