vuepress-plugin-image v1.0.4

vuepress-plugin-image

vuepress 配置

• 安装依赖

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"> -->


图片loading 动画

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}