vitepress预览缩放图片插件的踩坑之路！！!

插件①：【medium-zoom】

• 安装

npm i medium-zoom

• 使用：
  创建样式文件.vitepress/theme/style/var.css

.medium-zoom-overlay {
    background-color: var(--vp-c-bg) !important;
    z-index: 100;
}

.medium-zoom-overlay~img {
    z-index: 101;
}

.medium-zoom--opened .medium-zoom-overlay {
    opacity: 0.9 !important;
}

在.vitepress/theme/index.ts中引入使用样式文件：

import DefaultTheme from "vitepress/theme";
import { onMounted, watch, nextTick } from "vue";
import { useRoute } from "vitepress";
import mediumZoom from "medium-zoom";
import "./style/var.css";

// 图片缩放
export default {
  extends: DefaultTheme,

  setup() {
    const route = useRoute();
    const initZoom = () => {
      // 为所有图片增加缩放功能
      // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); // 默认
      mediumZoom(".main img", { background: "var(--vp-c-bg)" }); // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
    };
    onMounted(() => {
      initZoom();
    });
    watch(
      () => route.path,
      () => nextTick(() => initZoom())
    );
  },
};

缺陷:
只支持放大查看图片，其他缩放、翻页等功能都没有；
原图片像素太大图片不居中，样式混乱不好看。
不推荐！！！

插件②：【v-preview-image】

• 安装

npm i v-preview-image

• 使用：
  在.vitepress/theme/index.ts中使用

import DefaultTheme from "vitepress/theme";
import { useRoute } from "vitepress";
import vPreviewImage from "v-preview-image";
import "./style/var.css";

// 图片缩放
export default {
  ...DefaultTheme,
  enhanceApp({app}){
    // 注册使用
    app.use(vPreviewImage)
  },
};

在markdown中：
需要给img加上点击事件$preview，并传入图片数组进行翻页查看

<img src="./images/image-01.png" @click="$preview(0,['./images/image-01.png,'/.images/image-02.png']"

缺陷:
这是一个vue插件，更适合在vue项目中使用；
虽然支持缩放、旋转、下一张图片等，但必须在markdown引入图片的地方写click事件，想要翻页查看文档图片，需要手动写入图片列表，十分麻烦！
不推荐在vitepress使用！！！

【推荐】插件③：【vitepress-plugin-image-viewer】

• 安装

npm i vitepress-plugin-image-viewer

• 使用：
  在.vitepress/theme/index.ts中使用

import DefaultTheme from "vitepress/theme";
import { useRoute } from "vitepress";
import imageViewer from "vitepress-plugin-image-viewer";
import "viewerjs/dist/viewer.min.css";
import "./style/var.css";

// 图片缩放
export default {
  ...DefaultTheme,
  setup() {
    // 获取路由
    const route = useRoute();
    // 使用
    imageViewer(route);
  },
};

这个插件的踩坑之路~

为什么一开始没发现使用这个插件呢？其实我一开始就用了，在外网开发都正常使用，结果搞到公司内网出问题了，所有又去找其他插件，就有了上面两种试错，是真不好用啊，然后我又回来研究这个插件到底哪出了问题！！

• 遇到啥问题呢？

点击查看图片这个插件是生效了，但只有关闭按钮，没有渲染图片！查看控制台img元素都没有，只有一个空div。
并且会卡死，不能关闭预览窗口，只能刷新页面

到处找原因，后来在viewerjs的github下找到了相同问题！！

• 解决方案：

  电脑-》设置-》动画-》打开windows中显示动画

优点：
使用简单：只需要安装和index.ts文件配置，开箱即用！
功能完善：缩放、上下翻页、旋转、调整大小。
图片大小自适应。
强烈推荐！！好用！