4-关于使用v-viewer过程中的一些报错处理

前提条件：要实现图片在线预览，仅在前端调用（vue项目）

过程：首先查了有哪个能直接预览图片的工具，找到了v-viewer这个，第一步就是安装

cnpm install v-viewer --save

下载得到的版本为3.0.13

在main.js中引入后，代码运行报错如下：

估计是版本不适配，又找到了另一个版本尝试下载

补充说明一下，npm 的标准标签包括 latest(默认标签，指向最新的稳定版本)、next(指向下一个预发布版本，通常是即将成为稳定版本的候选版本)、beta、alpha 等，这些标签用于标记包的发布状态。

cnpm install v-viewer@next

结果又报了一个错，大概的意思是我的 package.json 或其他依赖配置文件中有一个不正确的版本指定，即 vue@^a.6.14。这个版本指定明显是错误的，因为 ^ 符号后面应该跟着一个有效的版本号，而不是以字母 a 开头的版本号。

我就纳闷，我什么时候有这么一个版本了，然后我去package.json文件中检查，还真有一个，修改会原来的版本后，重新启动，运行成功。

终端是不报错了，但是控制台报错了

这个报错还是一个版本的问题，我又换了个版本

cnpm install v-viewer@legacy

补充一下说明，在npm中， @legacy 通常不是一个标准的标签(tag)来标识依赖包的版本，这样的标签可能是由特定的npm包开发者自定义的，用于标识那些与当前稳定版本API不兼容的、较旧的、但仍然可用的版本。

但需注意，如果该包没有使用 @legacy 标签，这个命令将会失败。如果需要安装一个旧版本的包，可以直接指定版本号。

这次控制台也不报错了，那就继续正常使用

准备好图片后发现点了没反应，结果是还少了一个依赖包viewerjs，继续下载

npm install viewerjs

终于成功了！

总结，现在v-viewer使用要认准下面这个完整的依赖包安装

npm install v-viewer@legacy viewerjs

在这里简单附上用法

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)
Viewer.setDefaults({
    // 是否启用inline模式，
        //true时表示预览图层在父元素内，
        //false时表示预览图层在顶层父元素上，即图层覆盖整个页面
    inline: true, 
    button: true, 
    navbar: true, 
    title: true, 
    toolbar: true, 
    tooltip: true, 
    fullscreen: true, 
    loading: true, 
    loop: true, 
    movable: true, 
    zoomable: true, 
    rotatable: true, 
    scalable: true, 
    toggleOnDblclick: true, 
    transition: true, 
    keyboard: true, 
    zoomRatio: 0.1,
    minZoomRatio: 0.01, 
    maxZoomRatio: 100,
})

<template>
  <div class="outer">
    <viewer>
      <div v-for="(img, index) in imgList" :key="index">
        <img :src="img.ImagePath" :data-source="img.ImagePath" />
      </div>
    </viewer>
  </div>
</template>

<script>
export default {
    data(){
        return{
            imgList:[
                {
                    ImagePath:require('@/assets/img/1678714851120.png')
                },
                {
                    ImagePath:require('@/assets/img/1678714881218.jpg')
                },
                {
                    ImagePath:require('@/assets/img/1678714893970.jpg')
                },
                {
                    ImagePath:require('@/assets/img/1693019890224.jpg')
                }
            ]
        }
    }
};
</script>

坚持就是胜利！