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

1、图片自适应大小

// 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
}

2、详情页图片点击放大

// 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>

效果：

标签：info,obj,text,data,点击,let,rich,imgarr,图片
来源： https://blog.csdn.net/u014678583/article/details/118606587