在百度小程序内，使用vue的v-html和微信小程序的wxParse无法正确展示后台富文本编辑器生成的文章或HTML代码。通过引入<rich-text>组件，并在.js文件中使用正则表达式匹配img标签，设置图片宽度为100%，可以解决图片展示不全的问题。
功能背景：需要在百度小程序内展示后台富文本编辑器设置文章或其他html代码，使用vue里的v-html与微信小程序内的wxParse不起作用，找了找官方文档发现了< rich-text >组件
代码示例
.swan代码
<rich-text nodes="{{content}}"></rich-text>
官方属性名介绍
直接引用后部分图片出现展示不全情况还需要在.js文件内设置图片宽度
.js代码
content = content.replace(/\<img/gi, '<img style="width:100%;height:auto;"')
进行正则匹配img标签给img标签设置style
扫一扫
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
