點擊放大

// js
 
data:{
    imgarr:[]
}
// 主要代碼
let imgarr = [];
let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有圖片
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src圖片
let arrsImg = obj.info.match(regex); // obj.info 后臺返回的富文本數(shù)據(jù)
for (let a = 0; a < arrsImg.length; a++) {
    let srcs = arrsImg[a].match(srcReg);
    imgarr.push(srcs[1])
}
this.setData({
    imgarr
})
 
// 點擊放大預覽圖片函數(shù)
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 后臺返回的富文本數(shù)據(jù)
 
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;
  box-sizing: border-box;
}
 
.fwb-img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block
}