【Element_UI】图片动态获取+预览-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Element_UI】图片动态获取+预览。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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/

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

位置放到fonts/下

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

1.5 遇到问题：Failed to decode downloaded font

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

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

解决方案：重新下载

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

1.6 引入axios

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

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

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

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

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>