当前位置：首页 > news >正文

微信小程序＜rich-text＞支持里面图片点击放大

news 来源：原创 2025/6/27 15:43:02

使用<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,})},