rich-text组件不支持预览图片，曲线救国方式

刺骨的言语ヽ痛彻心扉 2023-06-06 03:39 108阅读 0赞

<rich-text nodes="{
       {htmlVal}}" bindtap="test"></rich-text>

test:function(e){
        let that=this
        console.log("e", this.data.htmlVal)
        let arr=[];
        //let reg = /(?<=(src="))[^"]*?(?=")/ig
        发现一个Bug小程序js打包后不支持原生js双斜杠的方式,所以替换一下
        let reg = new RegExp('(?<=(src="))[^ "]*?(?=")','ig')
        let allSrc = that.data.htmlVal.match(reg)
        for (let i = 0; i<allSrc.length;i++){
          console.log("e000", allSrc[i])
          arr.push(allSrc[i])
          that.setData({
            imageArray:arr
          })
        }
        setTimeout(function(){
          wx.previewImage({
            current: that.data.imageArray, // 当前显示图片的http链接   
            urls: that.data.imageArray // 需要预览的图片http链接列表   
          }) 
        },500)
      }

亲测有效，缺陷是不能按照点击图片的顺序进行预览，不过小程序这个组件目前不支持图片预览，客户需要点击放大和保存图片，只能这样先实现功能了，如果大佬们有其他更好的办法欢迎提供。

您的支持是对我最大的鼓励。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20230601/1a48448d3f20471f868caec46e68cbc5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element组件el-input选择图片后预览显示

选择图片后显示预览图片 ![在这里插入图片描述][f103c9cc69324f93abea7a42a0a34b63.png_pic_center] 1.加入点击事件和

迷南。/ 2024年03月16日 23:52/ 0 赞/ 94 阅读

相关 React使用antd的图片预览组件，点击哪个图片就预览哪个的设置

使用了官方推荐的相册模式的预览，但是点击预览之后，每次都是从图片列表的第一张开始预览，而不是点击哪张就从哪张开始预览：![ed52ba95881f43eba282e090516

绝地灬酷狼/ 2023年10月14日 17:21/ 0 赞/ 80 阅读

相关 rich-text组件不支持预览图片，曲线救国方式

<rich-text nodes="{ {htmlVal}}" bindtap="test"></rich-text> test:functio

刺骨的言语ヽ痛彻心扉/ 2023年06月06日 03:39/ 0 赞/ 109 阅读

相关 ant-design-vue 图片预览组件，支持旋转，放大缩小，下载

![bc1a7800f6566634494c762cb0d14280.png][] // 图片预览组件，支持旋转，放大缩小，下载 // 图片预览组件，支持旋转，放大

拼搏现实的明天。/ 2023年01月20日 09:59/ 0 赞/ 13 阅读

相关 Viewer.js 图片预览插件

一、简介 Viewer.js 是一款强大的图片查看器。 Viewer.js 有以下特点：支持移动设备触摸事件支持响应式支持放大/缩小支

本是古典何须时尚/ 2022年09月04日 06:57/ 0 赞/ 477 阅读

相关点击按钮预览图片，可以预览多组图片（vue+element）

elementUI 提供的 Image 组件直接可以点击图片查看图片预览，我的需求也是查看预览图片，但是有很多小的区别！ > 1、点击按钮预览图片； > 2、可以预览多个

た入场券/ 2022年08月30日 15:59/ 0 赞/ 1073 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 515 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 734 阅读

相关 Vue图片预览插件viewerjs

GitHub地址：[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewer

灰太狼/ 2021年12月16日 08:13/ 0 赞/ 1117 阅读

相关 uniapp预览图片

一、需求最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

以你之姓@/ 2021年09月03日 05:51/ 0 赞/ 1309 阅读