VuePress v1 图片居中插件不生效

发表于 阅读次数： 评论数： 本文字数： 153 阅读时长 ≈ 1 分钟

问题说明

无论是 VuePress 官方主题，还是第三方主题，使用官方内置的插件 @vuepress/plugin-medium-zoom 都无法实现图片居中并点击放大的效果，配置示例如下。

  • 默认主题
1
2
3
4
5
6
7
module.exports = {
  plugins: {
    '@vuepress/medium-zoom': {
      selector: '.theme-default-content img'
    }
  }
}
  • 第三方主题
1
2
3
4
5
6
7
module.exports = {
  plugins: {
    '@vuepress/medium-zoom': {
      selector: '.theme-reco-content img'
    }
  }
}

问题解决

安装官方的另一款插件 vuepress-plugin-medium-zoom 来替代。

1
npm install -D vuepress-plugin-medium-zoom
  • 默认主题
1
2
3
4
5
6
7
module.exports = {
  plugins: {
    'vuepress-plugin-medium-zoom': {
      selector: '.theme-default-content img'
    }
  }
}
  • 第三方主题
1
2
3
4
5
6
7
module.exports = {
  plugins: {
    'vuepress-plugin-medium-zoom': {
      selector: '.theme-reco-content img'
    }
  }
}