Vue-elementui-实现图片预览

需求

展示图片缩略图,并且点击可以预览大图

实现

使用 elementUI 的Image组件

<div v-else-if="type=='img'">
    <el-image
      style="width: 50px; height: 50px"
      :src="previewURL"
      :preview-src-list="[previewSRC]"
      fit="contain"></el-image>
</div>

src 用来指定缩略题的url
preview-src-list 用来指定大图的url
computed:{
      previewURL(){
        return 'http://xxxx/api/file/preview?id=' + this.id +  '&width=50&height=50&token=' + this.$store.getters.token
      },
      //预览图
      previewSRC(){
        return 'http://xxxx/api/file/preview?id=' + this.id +  '&width=800&height=800&token=' + this.$store.getters.token
      }
}

结果


Vue      Vue ElementUI

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!

Vue-代码高亮 上一篇
Vue-axios-get实现文件下载 下一篇