小程序 rich-text中图片点击放大与自适应大小问题

图片点击放大

// js
 
data:{
    
    imgarr:[]
}
// 主要代码
let imgarr = [];
let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片
let arrsImg = obj.info.match(regex); // obj.info 后台返回的富文本数据
for (let a = 0; a < arrsImg.length; a++) {
    
    let srcs = arrsImg[a].match(srcReg);
    imgarr.push(srcs[1])
}
this.setData({
    
    imgarr
})
 
// 点击放大预览图片函数
catchImage(e){
    
    console.log(this.data.imgarr);
    wx.previewImage({
    
      current: this.data.imgarr[0], // 当前显示图片的http链接
      urls: this.data.imgarr // 需要预览的图片http链接列表
    })
  },
 
// html
 
<view class="mdl-xq">
  <rich-text nodes="{
    { goodObj.info }}" space="ensp" catchtap="catchImage"></rich-text>
</view>

自适应大小

// obj.info 后台返回的富文本数据
 
obj.info = obj.info.replace(/<img/gi, '<img class="fwb-img"')
          .replace(/<section/g, '<div')
          .replace(/\/section>/g, '\div>');
 
 
// html:
 
<view class="mdl-xq">
  <rich-text nodes="{
    { goodObj.info }}" space="ensp"></rich-text>
</view>
 
// css:
 
.mdl-xq {
    
  display: flex; // 这两行代码主要解决图片之间有白色间隔的问题
  flex-direction: column; // 这两行代码主要解决图片之间有白色间隔的问题
  padding:20rpx;
}
 
.fwb-img {
    
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block
}