Image click enlargement and adaptive size in the applet rich text

Click to enlarge the picture

// js
 
data:{
    
    imgarr:[]
}
//  Main code 
let imgarr = [];
let regex = new RegExp(/<img.*?(?:>|\/>)/gi); //  Match all pictures 
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //  matching src picture 
let arrsImg = obj.info.match(regex); // obj.info  Rich text data returned in the background 
for (let a = 0; a < arrsImg.length; a++) {
    
    let srcs = arrsImg[a].match(srcReg);
    imgarr.push(srcs[1])
}
this.setData({
    
    imgarr
})
 
//  Click the zoom in preview picture function 
catchImage(e){
    
    console.log(this.data.imgarr);
    wx.previewImage({
    
      current: this.data.imgarr[0], //  The http link 
      urls: this.data.imgarr //  Pictures that need to be previewed http Link list 
    })
  },
 
// html
 
<view class="mdl-xq">
  <rich-text nodes="{
    { goodObj.info }}" space="ensp" catchtap="catchImage"></rich-text>
</view>

Adaptive size

// obj.info  Rich text data returned in the background 
 
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; //  These two lines of code mainly solve the problem of white space between pictures 
  flex-direction: column; //  These two lines of code mainly solve the problem of white space between pictures 
  padding:20rpx;
}
 
.fwb-img {
    
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block
}