vue图片缩略图及图片预览功能

前言

上次有个需求,是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件。

效果如下:

  • vue显示图片缩略图
  • vue显示图片预览功能
    在这里插入图片描述

核心代码

两个el-image ,一个作为reference ,最后包括在一个el-popover即可。

<el-popover
        placement="right"
        title=""
        trigger="hover">
    <el-image src="${request.contextPath}/static/images/class1.png"></el-image>
    <el-image slot="reference" src="${request.contextPath}/static/images/class1.png" alt="${request.contextPath}/static/images/class1.png" style="max-height: 150px;max-width: 200px">
</el-popover>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页