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

2020-05-30 18:13:36

小程序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)
    }
}

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

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。转载请注明出处!

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
微信扫码关注
领取学习礼包
技术交流群
每天进步一点点~