驻风丶 2023-10-23 14:22 采纳率: 50%
浏览 24
已结题

vue3动态更改网页标题处图标

后端返回了标题和图标，标题已经更改好了，图标怎么改啊，图标的设置是在public下面的index.html里面的link设置的，怎么动态设置呢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
            content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta name="keywords" content="管理系统">
        <meta name="description" content="一个管理系统">
        <title>这个管理系统</title>
        <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
        <!-- <link rel="icon" :href="localStorage.getItem("icon")"> -->
        <!-- <link rel="icon" href="http://z.hexianzhu.com/source/icon/logos.ico"> -->
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

三个被注释掉的link
第一个link是本来的link，引用的是public下面的favicon.ico图标，这个是默认的
第二个是我引用后端传过来的图标地址，我把它存到本地缓存了，这样引用并不起作用
第三个是我直接把后端传过来的地址贴上去，是可以的
所以要怎样才能实现动态的图标呢

  • 写回答

3条回答 默认 最新

  • 驻风丶 2023-11-06 08:59
    关注

    在App.vue中加入

    let link = document.querySelector("link[rel*='icon']") || document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = respon.Data.applic_ico
document.getElementsByTagName("head")[0].appendChild(link);

    其中link.href就是图标的地址，这里用的是请求配置接口的返回值

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 11月14日
  • 已采纳回答 11月6日
  • 创建了问题 10月23日