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>
效果: