首页 > 建站教程 > 小程序、公众号 >  微信小程序rich-text正则替换显示图片正文

微信小程序rich-text正则替换显示图片

我爱模板网在用微信小程序的rich-text展示后台富文本编辑器发布的文章时,需要显示图片,page.wxml代码如下:
<view class="page-body">
    <view class="page-section">
        <view class="page-section-title"></view>
        <view class="rich-text-wrp">
            <rich-text nodes="{{html}}"></rich-text>
        </view>
    </view>
</view>
page.js中定义的字符串类型html变量:
data:{
    html:'',
}
在获取数据后,对html进行赋值,同时用正则将html的富文本内容进行替换,注意,如果图片是多张连续,并且有换行,需要给图片加上display:block,否则图片中间会出现空白:
//res为后台返回的富文本数据
this.setData({
    html:res.replace(/\<img/g,'<img style="max-width:100%; display:block" ')
})