【Element_UI】图片动态获取+预览

请叫我背影男神

已于 2022-07-08 15:48:50 修改

阅读量2.1k

点赞数

分类专栏： # Element 文章标签： vue elementui 图片预览

于 2022-07-07 15:45:34 首次发布

本文链接：https://blog.csdn.net/hutuyaoniexi/article/details/125660657

版权

Element 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

0.实现功能

1、动态获取图片

2、动态设置图片小图宽高

3、动态设置图片id值

4、加载完成后自动预览第一张图片

1、引入js

注意：引入顺序，先加载vue，在加载elementui 否则elementui无效果

1.1 引入element_ui样式

地址：https://unpkg.com/element-ui/lib/theme-chalk/index.css

1.2 引入vue.js

地址：https://cn.vuejs.org/v2/guide/installation.html

1.3 引入element_ui.js

地址：https://unpkg.com/element-ui/lib/index.js

1.4 下载element_ui的字体文件

注意：如果不下载，有的图标不会显示

地址：https://unpkg.com/element-ui/lib/theme-chalk/fonts/

位置放到fonts/下

1.5 遇到问题：Failed to decode downloaded font

原因：文件受损，无法解析

验证文件地址：https://www.fontsquirrel.com/tools/webfont-generator

解决方案：重新下载

1.6 引入axios

地址：https://axios-http.com/docs/intro

cdn方式引入的话，解压后在这里：

2、使用


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>element-图片遍历循环+预览-demo</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></head>
<body>
<div id="app">
    <el-image
            v-for="(item, index) in srcList"
            :id="'image_'+index"
            :style="{'width': setting.width, 'height': setting.height}"
            :src="item"
            :preview-src-list="srcList"
            @load ="zoomFirstImage"
        >
    </el-image>
</div>

<script>
    var tbbh = "${param.tbbh}";
    var sysenname ="${sessionScope.appinfo.sysenname}";

    //通过vue.js 把数据和对应的视图关联起来
    new Vue({
        el: '#app',
        data: {
            srcList: [],
            setting: {
                width: "100px",
                height: "100px"
            }
        },
        mounted:function(){
            this.getInfo();
        },
        methods:{
            getInfo:function (){
                var url ="<%=path%>/files/getFileList.do";
                var self = this;
                axios.get(url, {
                    params: {
                        "path": sysenname + "/tpk/" + tbbh
                    }
                }).then((response) => {
                    self.srcList= response.data;
                    this.changeImageSize();
                })
            },
            changeImageSize:function(){
                var w = document.documentElement.clientWidth;
                var h = document.documentElement.clientHeight;
                var offset = 30;
                this.setting.width = (w / 2) - offset;
                this.setting.height= (h / 2) - offset;
            },
            zoomFirstImage:function(){
                document.getElementById("image_0").click();
             }
        }
    })
</script>
<style>
    .el-image{margin: 10px;}
</style>
</body>
</html>