el-image大图预览踩坑

1、url和srcList[0]不同导致预览为空

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

<script>
  export default {
    data() {
      return {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>

官网示例 url和srcList[0]不同也可以正常显示预览第一张图片，但是项目中实际测试如果url和srcList[0]不同则导致预览的为空，向右切换时才正常显示第一张图片。

解决办法：使url和srcList[0]相同。

2、使用按钮展示图片预览

解决办法是需要调element组件包中的image-viewer.vue

<template>
  <div class="app-container doing-page">
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcList"
    />
    <el-button type="primary" @click="onPreview">查看图片</el-button>
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    ElImageViewer
  },
  data() {
    return {
      showViewer: false,
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  methods: {
    onPreview() {
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    }
  }
}
</script>