]*src=“.\/([^”]+).([a-zA-Z0-9]+)“\salt=”([^“])”[^>]*>/g,

    (match, p1, p2, altText) => {
    // const newSrc = `${backendUrl}/blogs/resources/images/${postId}/${p1}.${p2}`;
    const newSrc = `${p1}.${p2}`;
    const imgWithCaption = `
            <div>
                <img src="https://www.knowhub.vip/share/2/$%7BnewSrc%7D" alt="${altText}"/>
                <p>${altText}</p>
            </div>
            `;
    return imgWithCaption;
    }
);

},

## 2.2 图片居中+题注
这个配置参数是用来配置渲染成HTML页面前的回调函数，我们可以用这个回调函数做什么呢？很简单，可以用来实现一些特殊的元素设计。比如说，Markdown格式标准非常简陋，只规定了如何引入图片，但是没有规定如何设置图片的样式。HTML的文档流是从上到下、从左到右的线性布局的，默认情况下图片是放在新的一行的最左边的。但是实际上更最美观的实现是图片居中展示，并且显示题注。
例如，在这里笔者的Markdown文档中图片相关的内容及最终实现效果是：
![使用VS Code展示Markdown文档图片相关的内容](https://cdn.res.knowhub.vip/c/2505/30/3c9e3cb3.jpg?G1cAAER17rxgXdmI%2bJ14oAaFBJoBizSCSgnrde891ynyfI2gxeuvfbT14Te1jyYKwBRC0OEIIYHUZOXQHKjm6oaS4zsb)
在transform指定的回调函数中，也就是这里的html其实是个HTML字符串：
```js
<h3>图片</h3>
<pre><code>![alt 文本](https://cdn.res.knowhub.vip/c/2505/30/c4915739.png?CwqAaHR0cDovL2ltYWdlLXBhdGgucG5nAw%3d%3d)
![alt 文本](https://cdn.res.knowhub.vip/c/2505/30/a1d111fc.png &#34;图片 Title 值&#34;?ixOAaHR0cDovL2ltYWdlLXBhdGgucG5nICLlm77niYcgVGl0bGUg5YC8IgM%3d)
</code></pre>
<p><img src="https://www.knowhub.vip/share/2/head.jpg" alt="案例图片"/></p>

要实现图片居中，并且增加图片题注就很简单了，通过正则表达式搜索到图片的元素<p><img src="https://www.knowhub.vip/share/2/head.jpg" alt="案例图片"/></p>，将其替换成带题注并且居中的div元素，也就是：

const imgWithCaption = `
        <div>
            <img src="https://www.knowhub.vip/share/2/$%7BnewSrc%7D" alt="${altText}"/>
            <p>${altText}</p>
        </div>
        `;

最终，这个Markdown文档的图片的网页渲染效果就是：

2.3 图片源更换

笔者实现的另外一个定制功能就是实现更换图片源地址。如果我们经常编写Markdown文档就知道，因为Markdown格式是文字与图片分离的，因此对图片资源的管理是件很麻烦的事情：如果使用base64编码嵌到Markdown文档里，就会影响可读性；如果使用在线图床，要么花钱要么花精力，要么既花钱又花精力。所以笔者还是推荐使用本地相对地址，例如：

![自定义Markdown文档图片元素的默认样式](https://cdn.res.knowhub.vip/c/2505/30/d37a28de.jpg?CwOALi8yLmpwZwM%3d)

这样的写法，先保证本地文档能正常工作。但是Markdown文档在渲染成网页后这个相对地址就不一样生效了，往往需要对图片地址进行更换。更关键的是，像图片这种稍微重一点的资源最好放到CDN上，所以图片源地址的更换就是个强需求，也就是这部分代码的意思：

return html.replace(
    /<img\s+[^>]*src=&#34;\.\/([^&#34;]+)\.([a-zA-Z0-9]+)&#34;\s*alt=&#34;([^&#34;]*)&#34;[^&gt;]*&gt;/g,
    (match, p1, p2, altText) =&gt; {
    // const newSrc = `${backendUrl}/blogs/resources/images/${postId}/${p1}.${p2}`;
    const newSrc = `${p1}.${p2}`;
    //...
    }
);

先用正则表达式找到图片元素的内容，然后对图片地址进行更换，更换成域内的短地址，也可以使用域外的长地址。也就是不要在Markdown文档本身下功夫，保证本地可以正常显示即可，更多的具体的定制功能通过Vditor渲染前回调来实现。

3. 结语

这个案例最终的显示效果如下所示： 甚至可以表现脑图、流程图、时序图、甘特图、图表、五线谱、流程图等： 不得不说Vditor不一定是所有Markdown编辑器中最好用，但一定是功能比较全的编辑器了，至少比笔者使用过的tui.editor要强不少。其实通过这个功能，你就可以大致实现一个技术博客网站了。具体思路是：把这个渲染过程工具化，将Markdown格式的博客文档批量生成静态网页，然后通过Web服务器进行发布；其实这也是一些静态博客网站工具的实现思路。 实现代码