【Element_UI】图片预览demo

请叫我背影男神

已于 2022-07-07 15:31:38 修改

阅读量314

点赞数

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

于 2022-07-07 14:15:10 首次发布

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

版权

Element 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

解决方案：重新下载

2、使用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<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>
</head>
<body>
<div id="app">
    <div class="demo-image__preview">
        <el-image
                style="width: 100px; height: 100px"
                :src="url"
                :preview-src-list="srcList">
        </el-image>
    </div>
</div>

<script>
    var Main = {
        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'
                ]
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>