v-viewer踩坑之路

近期项目中做了一个图片预览的功能，因为是vue项目，所以使用了v-viewer。这个插件功能蛮强大的，但是使用的过程发现了几个问题：

问题1：每次点击图片预览，总是从列表中第一项开始预览

解决方案：点击图片时，修改图片列表顺序，将当前点击的图片置为列表第一项

问题2：图片列表中如果有一张图片加载有问题，则导致所有图片无法预览

解决方案：循环图片列表，使用如下判断图片是否可正常加载，如果返回false则将图片替换成一张默认图片，如果返回true则使用原图片地址

validateImage(pathImg) {

        let ImgObj = new Image()

        ImgObj.src = pathImg

        if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {

            return true

        } else {

            return false

        }

}

使用该方案一开始还没发现问题，但是用了几天后发现了问题，明明有些图片是正常的，使用这个方法判断的时候却返回了false，导致一些正常的图片也显示成了默认图片，最后还是使用如下方案解决了该问题：

首先给img添加error事件，然后该事件中直接将图片地址替换成默认图片即可。

<img v-for="(item, index) in imgList" :src="imgHandle(item.content)" :key="index" v-show="false" @error="handleError($event)">

// 图片加载失败，使用默认图片

        handleError(e) {

            e.currentTarget.src = defaultImg

        }