小程序Markdown渲染库渲染问题小记
最近在使用Markdown渲染库wemark的过程中遇到了图片不能显示的问题。
渲染库可以渲染markdown语法格式的图片，但是对于自定义大小了的原生图片标签却无法正常渲染，导致markdown文件中的图片无法正常显示。
首先我们知道markdown中插入图片有几种方式
但是无法控制图片的显示大小，如果想控制大小就必须使用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 =
''
cnt = cnt.replace(arr[i], 'img' + i).replace('img' + i, imgMdStr)
}
}
这样图片就被还原为渲染库支持的格式，可以正常显示了。
