微信小程序<rich-text>支持里面图片点击放大
使用<rich-text>渲染类似下面的html代码:
<div style='color: red'>宠物友好<br/>xxx提供宠物友好服务,具体请见下图<br/></div>
<img src='https://xxx.com/xxx1.png' width='100%'/>
<img src='https://xxx.com/xxx2.png'' width='100%'/>
wxml:
<rich-text nodes="{{item.text}}" bind:tap="showImg" data-nodes="{{item.text}}"></rich-text>
js放大图片方法:
//富文本图片点击预览showImg(e) {let contentimg = e.target.dataset.nodes;let imgs = contentimg.match(/<img[^>]+>/g); //把img所有节点的图片选择出来let arrImg = [];//遍历标签拼拿到你的图片的src里面的内容放在我们数组中for (var j = 0; j < imgs.length; j++) {imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {arrImg.push(capture)})}//最后一步就是把我们的所有图片放在预览的api中就可以了wx.previewImage({current: arrImg,urls: arrImg,})},