npm i vuepress-plugin-image -D

// config.js module.exports = { plugins: [ ['image'] ] } 设置图片大小

markdown-it-imsize

![](https://picsum.photos/300/150/?random =200x100)


markdown-it-image-lazy-loading 支持Chrome 75以上的 版本 原生图像延迟加载

<!-- <img src="example.png" alt="" title="image title" loading="lazy"> -->


markdown-it-image-loading

// config.js module.exports = { plugins: [ ['image'], { loading: true, loadingSrc: 'http://tangxiaomi.top/markdown-it-image-loading/loading.gif', loadingWidth: 30, loadingHeight: 30, minWidth: 100, minHeight: 100, bgColor: '#000' } ] } 参数 loading 是否显示loading 默认：true loadingSrc loading 图片 src loadingWidth : loading 图片宽度 默认：30 loadingHeight : loading 图片高度 默认：30 minWidth : 图片最小宽度 (图片的最小高度) 默认：100 minHeight : 图片最小高度 (图片的最小宽度) 默认：100 bgColor : 图片背景颜色 (图片的背景颜色) 默认：'' markdown 单独设置 loading 样式

![](/){loadingSrc=http://tangxiaomi.top/markdown-it-image-loading/loading.gif loadingWidth=50 loadingHeight=50 minWidth=200 minHeight=200 bgColor=#ccc}

{loadingSrc=http://tangxiaomi.top/markdown-it-image-loading/loading.gif loadingWidth=50 loadingHeight=50 minWidth=200 minHeight=200 bgColor=#ccc}