微信原生富文本（rich-text）实现图片预览

wxml

  <rich-text wx:if="{{!isLoading && content}}" nodes="{{content}}" catchtap="richTextClick"></rich-text>
  <view class="empty" wx:if="{{!isLoading && !content}}">暂无数据</view>

js

 // 富文本点击事件
    richTextClick() {
        // 富文本
        const richContent = this.data.content;
        // 判断含有图片
        if (richContent.indexOf("src") >= 0) {
            const imgs = [];
            richContent.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                imgs.push(capture);
            })
            wx.previewImage({
                current: imgs[0], // 当前显示图片的链接
                urls: imgs
            })
        }
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容