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

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

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

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

代码语言：javascript复制

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

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

类似如下这种

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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)
    }
}

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

markdown 渲染 图片标签

0 人点赞