element 不使用el-image 预览图片的组件

el-image

  <el-image 
    style="width: 100px; height: 100px"
    :src="图片源" 
    :preview-src-list="开启图片预览功能（预览列表）">
  </el-image>

image-viewer

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

vue---html
 <el-image-viewer   
              v-if="showViewer"
              :on-close="closeViewer"
              hide-on-click-modal="false"
              :url-list="srcList"
              :onSwitch="onSwitch"
              :initialIndex="initialIndex"
/>
//图片索引
 <div class="preview-index" v-if="showViewer">{{ initialIndex +1}} / {{ srcList.length }}</div>
css
.preview-index {
  position: fixed;
  top: 30px;
  z-index: 9999;
  left: 50%;
  margin-left: -20px;
  font-size: 18px;
  font-weight: bold;
  color:red;
}

js 
methods:{
  closeViewer() {
      this.showViewer = false
    },
  // 切换图片 index为图片下标值
    onSwitch(index) {
      this.initialIndex = index 
    }
}