微信小程序解决rich-text 富文本渲染图片尺寸

在index.wxml

<view class="jie"> <view class="jie-title">商品介绍</view> <rich-text nodes="{{content}}"></rich-text> </view>

index.js

data:{ detailSwiper:[], //详情轮播图 basicInfo:[], // 轮播图下面的介绍 content:[], //详情图片 }, // 在页面一开始加载的时候就会执行 onLoad:function(options){ let id = options.id // console.log(index) http.getDetail({id:id}).then(res=>{ if(res.data.code==0){ //这里返回的code是0 wx.showLoading({ title: '加载中', }) setTimeout(function () { wx.hideLoading() }, 1000) this.setData({ detailSwiper: res.data.data.pics, basicInfo:res.data.data.basicInfo, content:res.data.data.content.replace(/\<img/gi, '<img style="display:block;max-width:100%;height:auto;margin:0 auto;padding:0"') }) } }) }

后台给的HTML 都是string 类型的 ，前端需要用replace 批量给img 设置一下样式

this.setData({ content:res.data.data.content.replace(/\<img/gi, '<img style="display:block;max-width:100%;height:auto;margin:0 auto;padding:0"') })