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

使用渲染类似下面的html代码:

宠物友好
xxx提供宠物友好服务,具体请见下图

wxml:

js放大图片方法:

 //富文本图片点击预览
  showImg(e) {
    let contentimg = e.target.dataset.nodes;
    let imgs = contentimg.match(/]+>/g); //把img所有节点的图片选择出来
    let arrImg = [];
    //遍历标签拼拿到你的图片的src里面的内容放在我们数组中
    for (var j = 0; j < imgs.length; j++) {
      imgs[j].replace(/]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
        arrImg.push(capture)
      })
    }
    //最后一步就是把我们的所有图片放在预览的api中就可以了
    wx.previewImage({
      current: arrImg,
      urls: arrImg,
    })
  },

你可能感兴趣的:(微信小程序,小程序)