wemark小程序Markdown渲染库渲染原生图片标签的问题

薛定喵君

发布于 2020-05-31 15:13:57

1.2K0

发布于 2020-05-31 15:13:57

文章被收录于专栏：薛定喵君薛定喵君

小程序Markdown渲染库渲染问题小记

最近在使用Markdown渲染库wemark 的过程中遇到了图片不能显示的问题。渲染库可以渲染markdown语法格式的图片，但是对于自定义大小了的原生图片标签却无法正常渲染，导致markdown文件中的图片无法正常显示。

首先我们知道markdown中插入图片有几种方式

![avatar](本地图片路径/网络图片路径/图片base64编码)

但是无法控制图片的显示大小，如果想控制大小就必须使用img标签了。

类似如下这种

<img src="/images/xxx.jpg" style="width: 40%;">

这样子在显示的时候就可以看到图片显示大小得到了控制，但是Markdown渲染库无法识别。所以暂时采取了一个比较曲线的方法，就是把原生图片标签再转换为md支持的图片格式

使用正则把图片标签转为markdown图片语法

let imgReg = /<img.*?(?:>|\/>)/gi //匹配img标签
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
let altReg = /alt=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片的alt

let cnt = data //markdown内容
let arr = cnt.match(imgReg) //筛选出所有的img

if (arr) {
    for (let i = 0; i < arr.length; i++) {
        let src = arr[i].match(srcReg)
        let alt = arr[i].match(altReg)
        let imgMdStr =
        '![' +
        (alt != null ? alt : '图片') +
        '](' +
        src[1] +
        ')'
        cnt = cnt.replace(arr[i], 'img' + i).replace('img' + i, imgMdStr)
    }
}

这样图片就被还原为渲染库支持的格式，可以正常显示了。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-05-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

markdown