- 从接口里获取到的文本:
<img alt="" src="http://地址.jpg" height="237" width="550" style="height:auto;" />
- 尝试了很多种修改图片样式的方法:
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" ')
- 正则替换后的文本:
<img width="80%!important" alt="" src="http://地址.jpg" height="237" width="550" style="height:auto;" />
-
不生效,好气~
-
翻官方文档发现:
nodes 不推荐使用 String 类型,性能会有所下降
-
哎, 好吧 好气~
-
将
HTML String
转成节点列表
-
安装
npm install mini-html-parser2 --save
-
引用
import parse from 'mini-html-parser2';
-
调用:
const content = htmlString.replace(/<img/gi, '<img width="80%!important" ') // htmlString是从接口里得到的富文本内容 parse(content, (err, nodes) => { if (!err) { this.nodes = nodes } })
-
ok 大功告成,开心
-
教训: 一出bug只想着搜答案,多看看官方文档,OK?