icon无法显示的问题

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课网办公OA系统</title>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="assets/element-plus/index.css">
    <!--引入组件库-->
    <script src="assets/vue/vue.global.js"></script>
    <script src="assets/element-plus/index.full.js"></script>
    <script src="assets/axios/axios.js"></script>

    <style>
        .el-header {
            background-color: rgb(238, 241, 246);
            color: #333;
            line-height: 60px;
        }

        html, body, #app, .el-container {
            padding: 0;
            margin: 0;
            height: 100%;
            max-height: 100%;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 100%;border: 1px solid #eee">
        <el-header>
            Header
        </el-header>
        <el-container>
            <el-aside width="200px" style="max-height: 100%;background-color: rgb(238, 241, 246)">
                <!--默认展开第一个模块功能-->
                <el-menu :default-openeds="['0']">
                    <template v-for="(n,idx) in nodeList">
                        <el-sub-menu :index="idx.toString()">
                            <template #title><i class="el-icon-s-tools"></i>{{n.node.nodeName}}</template>
                            <template v-for="func in n.children">
                                <el-menu-item :index="func.nodeId.toString()" v-on:click="showPage(func.url)">
                                    {{func.nodeName}}
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe id="main" name="main" src="https://www.imooc.com"
                        style="width: 100%;height: 95%;border: 0"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>

<script>
    const main = {
        data() {
            return {
                nodeList: []
            }
        },
        methods: {
            showPage(url) {
                document.getElementById("main").src = url;
            }
        },
        mounted() {
            const objApp = this;

            axios.get("/api/user_info?uid=" + sessionStorage.uid).then(function (response) {
                const json = response.data;

                json.data.nodeList.forEach(function (item) {
                    objApp.nodeList.push(item);
                })
            })
            console.info(objApp.nodeList);
        }
    }
    const app = Vue.createApp(main);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>

资源文件使用课程提供的资源,还是不能成功显示icon

明明是只幼刀 2021-12-29

源自：慕课OA系统 2-14 实现RBAC View层

收起

1回答

好帮手慕小小回答被采纳获得+3积分 2021-12-30 09:56:43

同学你好，ico文件无法显示时控制台是否出现如下提示信息呢？建议同学检查下项目中是否存在下述文件。

经过测试项目源码是可以显示ico文件的，建议同学清除IDEA缓存后重新运行试下。

祝学习愉快~

收起回答

明明是只幼刀提问者 #1

老师好,是无法显示element plus的icon,favicon.ico是正常显示的

2021-12-30 13:14:41
好帮手慕小小回复提问者明明是只幼刀 #2

同学你好，很抱歉老师没能准确解答同学的问题，同学代码中存在如下问题：
1、在发送请求时会发送uid和eid，故需要修改为axios.get("/api/user_info?uid=" + sessionStorage.uid + "&eid=" + sessionStorage.eid)
2、标签书写有误，需将el-sub-menu修改为el-submenu
祝学习愉快~

2021-12-30 14:34:32
明明是只幼刀提问者回复好帮手慕小小 #3

谢谢老师,之前使用的element-plus的版本不对导致el-submenu标签无效,现在已经完全好啦

2021-12-31 17:37:07